import Skeleton from '@material-hu/components/design-system/Skeleton';
import TableCell from '@material-hu/components/design-system/Table/components/TableCell';
import TableRow from '@material-hu/components/design-system/Table/components/TableRow';

import { CustomCellBorder } from './CustomCellBorder';

export const TableSkeleton = () => {
  return (
    <>
      {Array.from({ length: 4 }).map((_, index) => (
        <TableRow key={index}>
          <TableCell
            sx={{
              borderBottom: 'inherit',
              position: 'sticky',
              backgroundColor: ({ palette }) =>
                palette.new.background.layout.tertiary,
              left: 0,
              zIndex: 1000,
            }}
          >
            <Skeleton />
            <CustomCellBorder sx={{ right: 0 }} />
          </TableCell>
          {Array.from({ length: 5 }).map((_2, index2) => (
            <TableCell
              key={index2}
              sx={{ px: 1 }}
            >
              <Skeleton sx={{ minWidth: 30 }} />
            </TableCell>
          ))}
        </TableRow>
      ))}
    </>
  );
};
