import { Outlet, useLocation } from "react-router-dom";
import { useEffect } from "react";
import Header from "./Header";
import Footer from "./Footer";
import useHashScroll from "@/hooks/useHashScroll";
import { AliveScope } from "react-activation";

export default function MainLayout() {
    useHashScroll()
    const { pathname } = useLocation();

    useEffect(() => {
        window.scrollTo(0, 0);
    }, [pathname]);

    return (
        <div className="layout">
            <Header />
            <main className="container">
            <Outlet />
            </main>
            <Footer />
        </div>
    );
}