"use client";

import { useEffect, useState, Fragment } from "react";
import { Loading } from './Loading';
import { Next13ProgressBar } from 'next13-progressbar';
import { useData } from "@/Theme/Midone/Forms";
import { useUtility } from "@/lib/utility";

import Footer from "./Utils/footer";
import Header from "./Utils/header";

export function App({children, load}){
    const [ loading, setLoading ] = useState(true);
    const { get } = useData();
    const { fetchInitInfo } = useUtility();    

    useEffect(()=>{
        fetchInitInfo(get, ()=> setLoading(false));
    }, []);
    
    if(loading){
        const LoadingComponent = load? load : Loading;
        return <><LoadingComponent key={"App_loading"} /></>;
    }else{
        return <Fragment key="app_children">
            <div className="home-layout">
                <Header />
                {children}
                <Footer />
            </div>
            <Next13ProgressBar height="4px" color="#EE870E" options={{ showSpinner: true }} showOnShallow />
        </Fragment>
    }
}