import { getStateInfo } from "@/lib/getStateInfo";
import Footer from "./footer";
import Header from "./header";

function StLayout({ children, name }) {
    const { matchedCity } = getStateInfo();

    return (
        <div>
            <main className="w-full min-h-screen">
                <header className="w-full sticky bg-[#FFF] !z-[70] 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">
                    <div className="w-full padding-responsive">
                        <Header matchedCity={matchedCity} 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)]"
                >
                    {children}
                </section>
            </main>
            <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 matchedCity={matchedCity} />
                    </div>
                </div>
            </footer>
        </div>
    );
}

export default StLayout;