'use client';

import Footer from './footer';
import Header from './header';

// AOS
import Aos from "aos";
import "aos/dist/aos.css";
import { useEffect } from "react";
import Sidebar from './sidebar';

function Layout({ children, isTurnsDetails, setIsTurnsDetails, title, name, isOpenSide, setIsOpenSide, disableFooter, isSidebar, user, value, setValue }) {

    useEffect(() => {
        Aos.init({ duration: 1000 });
    }, [])

    return (
        <div>
            <main className={`w-full min-h-screen 
                ${disableFooter && 'pb-[calc(16px_+_80px)] sm:pb-[calc(52px_+_80px)] md:pb-[80px]'}`}>
                <header className="w-full fixed top-[12px] sm:top-[21px] md:top-[30px] lg:top-[40px] right-1/2 translate-x-1/2 padding-responsive z-[10]">
                    <Header name={name} />
                </header>
                <section className={`
                    opacity-page
                    ${isSidebar &&
                    'padding-responsive min-h-screen flex items-stretch justify-center gap-[12px] lg:gap-[24px] pt-[76px] sm:pt-[109px] mt:pt-[142px] lg:pt-[176px]'
                    }
                `}>
                    {isSidebar && (
                        <Sidebar
                            user={user}
                            value={value}
                            setValue={setValue}
                            isOpenSide={isOpenSide}
                            setIsOpenSide={setIsOpenSide}
                            isTurnsDetails={isTurnsDetails}
                            setIsTurnsDetails={setIsTurnsDetails}
                        />
                    )}
                    {children}
                </section>
            </main>
            {disableFooter ? undefined : (
                <footer className='bg-[#F5F5F5] pt-[44px] mt-[100px] bg-banner-footer !bg-center !bg-no-repeat !bg-cover'>
                    <div className='padding-responsive'>
                        <Footer />
                    </div>
                </footer>
            )}
        </div>
    )
}

export default Layout