import { FC } from 'react';
import { Helmet } from 'react-helmet-async';

import Box from '@material-hu/mui/Box';
import Container from '@material-hu/mui/Container';
import Typography from '@material-hu/mui/Typography';

import humandLogo from 'src/assets/humand.svg';
import useNewTheme from 'src/hooks/useNewTheme';
import { formatTitle } from 'src/utils/helmetUtils';
import { useLokaliseTranslation } from 'src/utils/i18n';

export const Maintenance: FC = () => {
  const { t } = useLokaliseTranslation('errors');

  const NewThemeProvider = useNewTheme();

  return (
    <NewThemeProvider>
      <Helmet>
        <title>{formatTitle(t('maintenance.maintenance_page_title'))}</title>
      </Helmet>
      <Container
        maxWidth="xl"
        sx={{
          height: '100vh',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        <Box
          component="img"
          alt="Humand"
          src={humandLogo}
          sx={{
            height: '48px',
            width: 'auto',
            marginBottom: 3,
          }}
        />
        <Typography variant="h5">
          {t('maintenance.maintenance_title')}
        </Typography>
        <Typography
          variant="body1"
          color="secondary"
        >
          {t('maintenance.maintenance_description')}
        </Typography>
      </Container>
    </NewThemeProvider>
  );
};

export default Maintenance;