import { Outlet } from "react-router";
import Footer from "./components/Footer/Footer.jsx"
import Header from "./components/Header/Header.jsx";
import Background from "./components/background/background.jsx";
import { Navigate } from "react-router";
import {  useContext} from "react";
import { AuthContext } from "./contexts/auth/AuthContext.js";


function Layout(){

    const { user, loading } = useContext(AuthContext);

    if (loading) return <p>Loading</p>;
    if (!user) return <Navigate to="/login" />;

    return (
        <div>
            <Background>
                <div className="content">
                    <Header />
                    <Outlet />
                    <Footer />
                </div>
            </Background>
        </div>
    )
}

export default Layout;