import TopBar from "../components/TopBar";
import { Link } from "react-router-dom";
import { User } from "../types";
import { useEffect, useState } from "react";
import axios from "axios";

import "../styles/404.css";

export default function NotFoundPage() {
    const [user, setUser] = useState<User | undefined>(undefined);

    useEffect(() => {
        const token = localStorage.getItem("token");
        if (token) {
            axios
                .post("/api/auth/me", {
                    token
                })
                .then((res) => {
                    setUser(res.data);
                })
                .catch((err) => {
                    console.error(err.response);
                });
        }
    }, []);

    return (
        <div className="forum-page">
            <TopBar user={user} />
            <div className="forum-section">
                <h2>404 - Page Not Found</h2>
                <p>Sorry, the page you are looking for does not exist.</p>
                <Link to="/">Go back to the homepage</Link>
            </div>
        </div>
    );
}