import React from 'react';
import { Box, Button, Typography } from '@mui/material';
import { useNavigate } from 'react-router-dom';

const ErrorPage: React.FunctionComponent = (): React.ReactElement => {

    const navigate = useNavigate()

    const goToHome = () => {
        navigate('/')
    }

    return (
        <Box
          sx={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            flexDirection: 'column',
            minHeight: '100vh'
          }}
        >
          <Typography variant="h1" style={{ color: 'white' }}>
            404
          </Typography>
          <Typography variant="h6" style={{ color: 'white' }}>
            The page you’re looking for doesn’t exist.
          </Typography>
          <Button onClick={goToHome} variant="contained">Back Home</Button>
        </Box>
      );
}

export default ErrorPage