import Skeleton from '@design-system/Skeleton';
import TableCell, {
  type TableCellProps,
} from '@design-system/Table/components/TableCell';
import TableRow from '@design-system/Table/components/TableRow';
import { times } from 'lodash';

export type TableRowSkeletonProps = {
  columnsLength?: number;
  headerRow?: boolean;
  getTableCellProps?: (column: number) => TableCellProps;
};

const TableRowSkeleton = ({
  columnsLength = 4,
  headerRow = false,
  getTableCellProps,
}: TableRowSkeletonProps) => {
  return (
    <TableRow headerRow={headerRow}>
      {times(columnsLength, column => (
        <TableCell
          key={column}
          {...getTableCellProps?.(column)}
        >
          <Skeleton
            isLoading
            width="100%"
            height="33px"
            variant="rounded"
          />
        </TableCell>
      ))}
    </TableRow>
  );
};

export default TableRowSkeleton;