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

const NotFound = () => {
 const navigate = useNavigate();

 return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        height: '100vh',
        backgroundColor: '#f5f5f5',
        textAlign: 'center',
      }}
    >
      <Typography variant="h1" sx={{ fontSize: '8em', color: '#4a4a4a' }}>
        404
      </Typography>
      <Typography variant="body1" sx={{ fontSize: '1.5em', color: '#4a4a4a' }}>
        Oops! The page you're looking for doesn't exist.
      </Typography>
      <Link
        href="/"
        underline="none"
        sx={{
          color: '#4a4a4a',
          fontSize: '1.2em',
          borderBottom: '1px solid #4a4a4a',
          paddingBottom: '2px',
          transition: 'all 0.3s ease',
          '&:hover': {
            color: '#2e2e2e',
            borderBottomColor: '#2e2e2e',
          },
        }}
        onClick={(e) => {
          e.preventDefault();
          navigate('/');
        }}
      >
        Go Home
      </Link>
    </Box>
 );
};

export default NotFound;