import { Skeleton, TableCell, TableRow } from '@mui/material'

interface LoadingRowsProps {
  rows?: number
  cols?: number
}

export function LoadingRows({ rows = 5, cols = 6 }: LoadingRowsProps) {
  return (
    <>
      {Array.from({ length: rows }).map((_, ri) => (
        <TableRow key={ri}>
          {Array.from({ length: cols }).map((_, ci) => (
            <TableCell key={ci}>
              <Skeleton variant="text" height={18} width={ci === 0 ? '80%' : ci === cols - 1 ? '40%' : '65%'} />
            </TableCell>
          ))}
        </TableRow>
      ))}
    </>
  )
}