import { times } from 'lodash-es';

import PxTableRowSkeleton from '@material-hu/components/composed-components/peopleExperience/TableRowSkeleton';

import { PATHS_TABLE_LIMIT } from '../../../constants';

const COLUMNS_LENGTH = 6;

const getColSpan = (column: number) => {
  if (column === 0) return 3;
  if (column === COLUMNS_LENGTH - 1) return 1;
  return 2;
};

const TableSkeleton = ({ rows = PATHS_TABLE_LIMIT }: { rows?: number }) => {
  return (
    <>
      {times(rows, row => (
        <PxTableRowSkeleton
          key={row}
          columnsLength={COLUMNS_LENGTH}
          getTableCellProps={column => ({
            colSpan: getColSpan(column),
            sx: {
              height: 73,
            },
          })}
        />
      ))}
    </>
  );
};

export default TableSkeleton;
