'use client';

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

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

function Layout({ children, title, name }) {

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

    return (
        <div>
            <main className="w-full min-h-screen">
                <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'>
                    {children}
                </section>
            </main>
            <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