import { useNavigate } from 'react-router-dom';

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

import Breadcrumbs from '@material-hu/components/design-system/Breadcrumbs';
import { type BreadcrumbLink } from '@material-hu/components/design-system/Breadcrumbs/types';

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

import useKudosTitle from '../../hooks/useKudosTitle';
import { acknowledgementsRoutes } from '../../routes';

export const ExchangesHeader = () => {
  const navigate = useNavigate();
  const title = useKudosTitle();
  const { t } = useLokaliseTranslation(['acknowledgements', 'home']);

  const links: BreadcrumbLink[] = [
    {
      title: t('home:wall'),
      onClick: () => navigate(acknowledgementsRoutes.acknowledgements()),
    },
    { title: t('products.exchanges') },
  ];

  return (
    <Stack sx={{ gap: 1 }}>
      <Typography
        variant="globalL"
        fontWeight="fontWeightSemiBold"
        component="h1"
      >
        {title}
      </Typography>
      <Breadcrumbs links={links} />
    </Stack>
  );
};