import Skeleton from '@design-system/Skeleton';
import TableCell from '@design-system/Table/components/TableCell';
import TableRow from '@design-system/Table/components/TableRow';
import { appearFromBottom } from '@utils/animations';

export type TableSkeletonProps = {
  /** The number of rows to render in the skeleton table. Defaults to 3. */
  rows?: number;
  /** The number of columns to render in the skeleton table. */
  cols: number;
};

const TableSkeleton = ({ rows = 3, cols = 3 }: TableSkeletonProps) => {
  return (
    <>
      {Array.from({ length: rows }).map((_, index) => (
        <TableRow key={index}>
          {Array.from({ length: cols }).map((__, idx) => (
            <TableCell key={idx}>
              <Skeleton
                sx={{
                  animation: `${appearFromBottom} 125ms ease-in-out backwards`,
                }}
                variant="rounded"
                height={32}
              />
            </TableCell>
          ))}
        </TableRow>
      ))}
    </>
  );
};

export default TableSkeleton;