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";
import Loading from "./components/ui/Loading/Loading.tsx";


function Layout(){

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

    if (loading) return <Background>
        <Loading />
    </Background>;
    if (!user) return <Navigate to="/login" />;
    if(user && user.validate === 0) return <Navigate to="/error/validation" />;

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

export default Layout;