import { Grid, Link as MUILink, Typography } from '@mui/material';
import { Link } from '@tanstack/react-router';
import { FC } from 'react';
import { useTranslation } from 'react-i18next';
import HeaderlessLayout from '../../components/Layouts/HeaderlessLayout';

const NotFoundComponent: FC = () => {
  const { t } = useTranslation();

  return (
    <HeaderlessLayout>
      <Grid container spacing={2} sx={{ marginTop: 0 }}>
        <Grid item xs={12} sx={{ display: 'flex', justifyContent: 'center' }}>
          <Typography variant="404">404</Typography>
        </Grid>
        <Grid item xs={12} sx={{ display: 'flex', justifyContent: 'center' }}>
          <Typography variant="h4" sx={{ textAlign: 'center' }}>
            {t('Page not found')}
          </Typography>
        </Grid>
        <Grid item xs={12} sx={{ display: 'flex', justifyContent: 'center' }}>
          <MUILink component={Link} to="/" variant="h6" underline="none">
            {t('Back to main')}
          </MUILink>
        </Grid>
      </Grid>
    </HeaderlessLayout>
  );
};

export default NotFoundComponent;
