import { IconInfoCircle } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack/Stack';

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 Tooltip from '@material-hu/components/design-system/Tooltip';

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

export const TableHeader = () => {
  const { t } = useLokaliseTranslation(['learning', 'service_management']);

  return (
    <TableHead>
      <TableRow
        sx={{
          '& th': {
            backgroundColor: ({ palette }) =>
              palette.new.background.elements.grey,
          },
        }}
      >
        <TableCell>{t('common.name')}</TableCell>
        <TableCell sx={{ textWrap: 'nowrap' }}>
          {t('session.type.title_one')}
        </TableCell>
        <TableCell>{t('service_management:date_and_time')}</TableCell>
        <TableCell>
          <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 0.5 }}>
            {t('common.confirmed')}
            <Tooltip description={t('session.tooltips.attendance')}>
              <IconInfoCircle size={16} />
            </Tooltip>
          </Stack>
        </TableCell>
        <TableCell>
          <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 0.5 }}>
            {t('session.attendance.title')}
            <Tooltip description={t('session.tooltips.confirmed')}>
              <IconInfoCircle size={16} />
            </Tooltip>
          </Stack>
        </TableCell>
        <TableCell>{t('general:state')}</TableCell>
        <TableCell sx={{ width: 60 }} />
      </TableRow>
    </TableHead>
  );
};
