import {
  Box,
  Skeleton,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableRow,
} from '@mui/material'

export interface TableSkeletonProps {
  /** Number of columns to display */
  columns?: number
  /** Number of rows to display */
  rows?: number
}

/**
 * Table skeleton loader component
 */
export function TableSkeleton({ columns = 4, rows = 5 }: TableSkeletonProps) {
  return (
    <Box aria-label='Table skeleton'>
      <Table>
        <TableHead>
          <TableRow>
            {Array.from({ length: columns }).map((_, index) => (
              <TableCell key={index}>
                <Skeleton width='80%' height={24} />
              </TableCell>
            ))}
          </TableRow>
        </TableHead>
        <TableBody>
          {Array.from({ length: rows }).map((_, rowIndex) => (
            <TableRow key={rowIndex}>
              {Array.from({ length: columns }).map((_, colIndex) => (
                <TableCell key={colIndex}>
                  <Skeleton width='70%' height={20} />
                </TableCell>
              ))}
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </Box>
  )
}