import { FC } from 'react';

import TableBody from '@material-hu/mui/TableBody';
import TableCell from '@material-hu/mui/TableCell';
import TableRow from '@material-hu/mui/TableRow';

import HuSkeleton from '@material-hu/components/design-system/Skeleton';

export type TableBodySkeletonProps = {
  columns: number;
  rows?: number;
};

export const TableBodySkeleton: FC<TableBodySkeletonProps> = props => {
  const { columns, rows = 4 } = props;

  const columnsList = Array.from(Array(columns).keys());
  const rowsList = Array.from(Array(rows).keys());

  return (
    <TableBody>
      {rowsList.map(row => (
        <TableRow key={row}>
          {columnsList.map(column => (
            <TableCell key={column}>
              <HuSkeleton height={32} />
            </TableCell>
          ))}
        </TableRow>
      ))}
    </TableBody>
  );
};

export default TableBodySkeleton;