import { FC } from 'react';

import { useTranslation } from 'react-i18next';

import Typography from '@material-hu/mui/Typography';

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';

type Header = {
  id: string;
  text: string;
  width: string;
};

const headers: Header[] = [
  { id: 'name', text: 'name', width: '348px' },
  { id: 'lastUpdate', text: 'last_update', width: '212px' },
  { id: 'finalAuthor', text: 'final_author', width: '334px' },
  { id: 'actions', text: 'actions', width: '134px' },
];

const DraftPermissionsHeader: FC = () => {
  const { t } = useTranslation(['drafts']);

  return (
    <HuTableHead>
      <HuTableRow headerRow>
        {headers.map(header => (
          <HuTableCell
            headerCell
            key={header.id}
            width={header.width}
          >
            <Typography
              variant="globalXXS"
              fontWeight="fontWeightSemiBold"
              sx={{
                color: theme => theme.palette.textColors?.neutralTextLighter,
              }}
            >
              {t(header.text).toUpperCase()}
            </Typography>
          </HuTableCell>
        ))}
      </HuTableRow>
    </HuTableHead>
  );
};
export default DraftPermissionsHeader;