import { useTranslation } from 'react-i18next';

// ** MUI Imports
import { Box, Typography } from '@mui/material';
import { styled } from '@mui/material/styles';

const Img = styled('img')(({ theme }) => ({
  marginBottom: theme.spacing(10),
  [theme.breakpoints.up('lg')]: {
    height: 200,
    marginTop: theme.spacing(13),
  },
  [theme.breakpoints.down('lg')]: {
    height: 240,
    marginTop: theme.spacing(10),
  },
  [theme.breakpoints.down('md')]: {
    height: 160,
  },
}));

const Error = () => {
  const { t } = useTranslation();

  return (
    <Box
      sx={{
        p: 5,
        height: '100vh',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyItems: 'center',
        textAlign: 'center',
      }}
    >
      <Typography variant='h4' sx={{ mt: '14%', color: '#dc4d4d' }}>
        {t('errors.expiredLink')}
      </Typography>
      <Img alt='error-illustration' src='/images/apple-touch-icon.png' />
    </Box>
  );
};

export default Error;