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

export default function NoPage() {

    const theme = useTheme();
    const { t } = useTranslation();
    const navigate = useNavigate();

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

    return (
        <Box
            className="no-page-container"
            sx={{ color: theme.palette.text.primary }}
        >
            <Typography variant="h1" className="no-page-title">
                404
            </Typography>
            <Typography variant="h5" className="no-page-subtitle">
                {t('pageDoesNotExist')}
            </Typography>
            <Typography variant="body1" className="no-page-description">
                {t('wrongTurn')}
            </Typography>
            <Button
                variant="contained"
                color="primary"
                size="large"
                className="no-page-button"
                onClick={handleGoHome}
            >
                {t('backToHome')}
            </Button>
        </Box>
    );
}