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

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

const ReportBalanceRowHeader = () => {
  const { t } = useLokaliseTranslation('time_off');
  const listReportBalanceTableHeader = reportBalanceTableHeader(t);

  return (
    <HuTableHead>
      <HuTableRow headerRow>
        {listReportBalanceTableHeader.map(headerElement => (
          <HuTableCell
            key={headerElement.id}
            headerCell
          >
            {headerElement.text}
          </HuTableCell>
        ))}
      </HuTableRow>
    </HuTableHead>
  );
};

export default ReportBalanceRowHeader;
