import { Helmet } from 'react-helmet-async';
import { Outlet } from 'react-router-dom';

import Stack from '@material-hu/mui/Stack';
import { type Theme } from '@material-hu/mui/styles';

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { formatTitle } from 'src/utils/helmetUtils';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { MicroloansTermsModalProvider } from './contexts/MicroloansTermsModalContext';

const MICROLOANS_MAX_WIDTH_PX = 1000;

const MicroloansLayout = () => {
  const HuGoThemeProvider = useHuGoTheme();
  const { t } = useLokaliseTranslation('loans');

  return (
    <HuGoThemeProvider>
      <Helmet>
        <title>{formatTitle(t('form.helmet_title'))}</title>
      </Helmet>
      <Stack
        sx={{
          backgroundColor: ({ palette }: Theme) =>
            palette.new.background.layout.default,
          minHeight: '100%',
          pt: 6,
          px: 3,
          fontFamily: theme => theme.typography.fontFamily,
        }}
      >
        <MicroloansTermsModalProvider>
          <Stack
            sx={{
              maxWidth: MICROLOANS_MAX_WIDTH_PX,
              width: '100%',
              mx: 'auto',
              gap: 3,
            }}
          >
            <Outlet />
          </Stack>
        </MicroloansTermsModalProvider>
      </Stack>
    </HuGoThemeProvider>
  );
};

export default MicroloansLayout;