import { Skeleton, Box } from '@mui/material'

interface LoadingSkeletonProps {
  variant?: 'table' | 'card' | 'list' | 'text'
  rows?: number
}

export default function LoadingSkeleton({ variant = 'text', rows = 3 }: LoadingSkeletonProps) {
  if (variant === 'table') {
    return (
      <Box>
        {Array.from({ length: rows }).map((_, i) => (
          <Box key={i} sx={{ display: 'flex', gap: 2, mb: 2 }}>
            <Skeleton variant="rectangular" width="20%" height={40} />
            <Skeleton variant="rectangular" width="15%" height={40} />
            <Skeleton variant="rectangular" width="15%" height={40} />
            <Skeleton variant="rectangular" width="15%" height={40} />
            <Skeleton variant="rectangular" width="15%" height={40} />
            <Skeleton variant="rectangular" width="20%" height={40} />
          </Box>
        ))}
      </Box>
    )
  }

  if (variant === 'card') {
    return (
      <Box>
        {Array.from({ length: rows }).map((_, i) => (
          <Box key={i} sx={{ mb: 2 }}>
            <Skeleton variant="rectangular" height={200} />
            <Box sx={{ p: 2 }}>
              <Skeleton variant="text" width="60%" />
              <Skeleton variant="text" width="40%" />
            </Box>
          </Box>
        ))}
      </Box>
    )
  }

  if (variant === 'list') {
    return (
      <Box>
        {Array.from({ length: rows }).map((_, i) => (
          <Box key={i} sx={{ display: 'flex', gap: 2, mb: 2, alignItems: 'center' }}>
            <Skeleton variant="circular" width={40} height={40} />
            <Skeleton variant="text" width="70%" height={40} />
            <Skeleton variant="text" width="20%" height={40} />
          </Box>
        ))}
      </Box>
    )
  }

  return (
    <Box>
      {Array.from({ length: rows }).map((_, i) => (
        <Skeleton key={i} variant="text" sx={{ mb: 1 }} />
      ))}
    </Box>
  )
}

