import { Box, Typography, Button } from "@mui/material";
import { useNavigate } from "react-router-dom";
import "./pages.css";

export default function NoPage() {
    const navigate = useNavigate();

    const handleGoHome = () => {
        navigate("/");
    };

    return (
        <Box className="no-page-container">
            <Typography variant="h1" className="no-page-title">
                404
            </Typography>
            <Typography variant="h5" className="no-page-subtitle">
                Oops! The page you're looking for doesn't exist.
            </Typography>
            <Typography variant="body1" className="no-page-description">
                It seems you may have taken a wrong turn. Let's get you back on track.
            </Typography>
            <Button
                variant="contained"
                color="primary"
                size="large"
                className="no-page-button"
                onClick={handleGoHome}
            >
                Go Back to Home
            </Button>
        </Box>
    );
}