import * as React from "react";
import { Skeleton } from "./skeleton";
import { TableBody, TableCell, TableRow } from "./table";

interface IProps {
  length?: number;
  column: number;
  cellColSpan?: number;
}

const TableSkeleton = React.forwardRef<HTMLTableSectionElement, IProps>(
  ({ column, length = 20, cellColSpan = 100 }, ref) => {
    return (
      <TableBody ref={ref} data-cy="table-skeleton">
        {Array.from({ length }).map((_, i) => (
          <TableRow key={i} data-cy={`table-skeleton-row-${i}`}>
            {Array.from({ length: column }).map((_, j) => (
              <TableCell key={j} colSpan={cellColSpan} data-cy="table-skeleton-cell">
                <Skeleton className="h-8 rounded-lg" />
              </TableCell>
            ))}
          </TableRow>
        ))}
      </TableBody>
    );
  },
);
TableSkeleton.displayName = "TableSkeleton";

export default TableSkeleton;