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

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

import { ExclusiveBenefitPill } from '../ExclusiveBenefitPill';

export const RequestOfferFormHeader = () => {
  const { t } = useLokaliseTranslation('loans');

  return (
    <Stack
      sx={{
        alignItems: 'stretch',
        gap: 2.5,
        minWidth: 0,
      }}
    >
      <ExclusiveBenefitPill />

      <Typography
        component="h2"
        variant="globalXL"
        sx={{
          fontWeight: 'fontWeightBold',
          color: theme => theme.palette.new.text.neutral.default,
          lineHeight: 1.2,
          letterSpacing: -0.02,
        }}
      >
        {t('form.title_before')}{' '}
        <Stack
          component="span"
          sx={{
            display: 'inline',
            color: theme => theme.palette.primary.main,
          }}
        >
          {t('form.title_highlight')}
        </Stack>{' '}
      </Typography>
    </Stack>
  );
};