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

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

const CategoriesTableHeader = () => {
  const { t } = useLokaliseTranslation(['learning']);

  return (
    <TableHead>
      <TableRow
        sx={{
          '& th': {
            backgroundColor: ({ palette }) =>
              palette.new.background.elements.grey,
            textWrap: 'nowrap',
          },
        }}
      >
        <TableCell
          headerCell
          sx={{ width: 74 }}
        />
        <TableCell headerCell>{t('categories.title_one')}</TableCell>
        <TableCell headerCell>{t('general:state')}</TableCell>
        <TableCell headerCell>{t('courses.associated.title')}</TableCell>
        <TableCell
          headerCell
          sx={{ width: 60 }}
        />
      </TableRow>
    </TableHead>
  );
};

export default CategoriesTableHeader;
