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

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

const SKELETON_ROWS = 4;

const TimeSheetTableSkeleton = () => {
  return (
    <>
      {Array(SKELETON_ROWS)
        .fill(0)
        .map((_, rowIndex) => (
          <TableRow key={rowIndex}>
            <TableCell>
              <HuSkeleton
                width={111}
                height={32}
              />
            </TableCell>
            {Array.from({ length: 2 }).map((_2, index) => (
              <TableCell key={index}>
                <HuSkeleton
                  width={191}
                  height={32}
                />
              </TableCell>
            ))}
            <TableCell>
              <HuSkeleton
                width={283}
                height={32}
              />
            </TableCell>
            <TableCell>
              <HuSkeleton
                width={24}
                height={32}
              />
            </TableCell>
          </TableRow>
        ))}
    </>
  );
};

export default TimeSheetTableSkeleton;
