import { type TableSortingHeaderProps } from '@material-hu/hooks/useServerPagination';

import TableSkeleton from '@material-hu/components/composed-components/TableSkeleton';
import Table from '@material-hu/components/design-system/Table';
import TableBody from '@material-hu/components/design-system/Table/components/TableBody';
import TableContainer from '@material-hu/components/design-system/Table/components/TableContainer';

import { TABLE_SKELETON_COLS, TABLE_SKELETON_ROWS } from '../../../constants';

import { TableHeader } from './TableHeader';

type TableLoadingProps = {
  TableSortingHeader: TableSortingHeaderProps;
};

export const TableLoading = ({ TableSortingHeader }: TableLoadingProps) => (
  <TableContainer>
    <Table>
      <TableHeader TableSortingHeader={TableSortingHeader} />
      <TableBody>
        <TableSkeleton
          rows={TABLE_SKELETON_ROWS}
          cols={TABLE_SKELETON_COLS}
        />
      </TableBody>
    </Table>
  </TableContainer>
);
