import { Helmet } from '@dr.pogodin/react-helmet';
import { useEffect } from 'react';
import { useLocation, useNavigate } from 'react-router';
import type { MultiLang } from '../../config';
import Functions from '../../functions';

interface Props {
    lang: MultiLang;
}

const TOP_URL = '/';

const PageNotFound = (props: Props) => {
    const { lang } = props;
    const location = useLocation();
    const navigate = useNavigate();

    useEffect(() => {
        if (location.pathname === TOP_URL) {
            return;
        }
        const timer = setTimeout(() => {
            void navigate(TOP_URL);
        }, 5000);
        return () => clearTimeout(timer);
    }, [location.pathname, navigate]);

    return (
        <div>
            <Helmet>
                <title>Page Not Found - {Functions.siteTitle(lang)}</title>
            </Helmet>
            <h1>Page Not Found</h1>
            <section>
                <p>The page you were trying to access doesn't exist.</p>
                <p>
                    If the page does not automatically reload, please go to the <a href={TOP_URL}>top page</a>
                </p>
            </section>
        </div>
    );
};

export default PageNotFound;