"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 sticky bg-[#FFF] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] mt-[12px] sm:mt-[21px] md:mt-[30px] lg:mt-[40px] top-0 right-1/2 z-[10]">
          <div className="w-full padding-responsive">
            <Header name={name} />
          </div>
        </header>
        <section
          className={`
                    opacity-page -mt-[calc(48px_+_12px)] sm:-mt-[calc(56px_+_21px)] md:-mt-[calc(64px_+_30px)] lg:-mt-[calc(80px_+_40px)]
                    ${
                      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] mt-[100px] bg-banner-footer !bg-center !bg-no-repeat !bg-cover">
          <div className="pt-[44px] bg-[rgba(255,255,255,0.45)]">
            <div className="padding-responsive">
              <Footer />
            </div>
          </div>
        </footer>
      )}
    </div>
  );
}

export default Layout;