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 '@material-hu/components/design-system/HumandLogo';

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

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

  return (
    <>
      <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 sx={{ marginBottom: 3 }}>
          <HumandLogo
            title="Humand"
            style={{ height: 48, width: 'auto' }}
          />
        </Box>
        <Typography
          component="h5"
          sx={{
            fontSize: '24px',
            fontWeight: '700',
            lineHeight: '29px',
            letterSpacing: '0px',
            textAlign: 'center',
            marginBottom: 1,
          }}
        >
          {t('maintenance.maintenance_title')}
        </Typography>
        <Typography
          component="span"
          sx={{
            fontSize: '16px',
            fontWeight: '400',
            lineHeight: '24px',
            letterSpacing: '0px',
            textAlign: 'center',
            color: 'text.secondary',
          }}
        >
          {t('maintenance.maintenance_description')}
        </Typography>
      </Container>
    </>
  );
};

export default Maintenance;