/**
 * @deprecated — no Hugo equivalent.
 * Table header cell with an optional custom sorting component slot and a help tooltip.
 */
import HelpOutlineIcon from '@material-hu/icons/material/HelpOutline';
import Stack from '@material-hu/mui/Stack';
import TableCell, { TableCellProps } from '@material-hu/mui/TableCell';
import Tooltip from '@material-hu/mui/Tooltip';

import { useLokaliseTranslation } from 'src/utils/i18n';

type Props = {
  SortingHeaderComponent?: React.ComponentType<
    Omit<TableCellProps, 'id'> & { id: string }
  >;
  id?: string;
};

const TablePositionHeader = ({
  SortingHeaderComponent = TableCell,
  id = 'position',
}: Props) => {
  const { t } = useLokaliseTranslation('backoffice_only');

  return (
    <SortingHeaderComponent
      id={id}
      sx={{ width: 10 }}
      align="center"
    >
      <Stack
        direction="row"
        alignItems="center"
      >
        {t('backoffice_only:table_position.position')}
        <Tooltip title={t('backoffice_only:table_position.position_tooltip')}>
          <HelpOutlineIcon
            fontSize="small"
            sx={{ ml: 1 }}
          />
        </Tooltip>
      </Stack>
    </SortingHeaderComponent>
  );
};

export default TablePositionHeader;