import { HuTableSortingHeaderProps } from '@material-hu/hooks/TableSorting/useHuServerTableSorting';

import HuTableCell from '@material-hu/components/design-system/Table/components/TableCell';
import HuTableHead from '@material-hu/components/design-system/Table/components/TableHead';
import HuTableRow from '@material-hu/components/design-system/Table/components/TableRow';

export type Header = {
  id: string;
  label: string;
  sort: boolean;
  enabled: boolean;
  width?: string;
  tooltipTitle?: string;
};

type PeopleHeaderCellProps = {
  headers: Header[];
  TableSortingHeader: (props: HuTableSortingHeaderProps) => JSX.Element;
};

const PeopleHeaderCell = (props: PeopleHeaderCellProps) => {
  const { headers, TableSortingHeader } = props;

  return (
    <HuTableHead>
      <HuTableRow headerRow>
        {headers.map(header => (
          <>
            {header.sort ? (
              <TableSortingHeader
                key={header.id}
                id={header.id}
                sx={{ width: header.width || 'auto' }}
                tooltipTitle={header.tooltipTitle}
              >
                {header.label}
              </TableSortingHeader>
            ) : (
              <HuTableCell
                sx={{ width: header.width || 'auto' }}
                headerCell
              >
                {header.label}
              </HuTableCell>
            )}
          </>
        ))}
        <HuTableCell
          sx={{ width: '140px' }}
          headerCell
        />
      </HuTableRow>
    </HuTableHead>
  );
};

export default PeopleHeaderCell;
