// react
import React, { PropsWithChildren } from "react";
// third-party
import classNames from "classnames";
// application
import Footer from "~/components/footer/Footer";
import Header from "~/components/header/Header";
import MobileHeader from "~/components/mobile/MobileHeader";
import MobileMenu from "~/components/mobile/MobileMenu";
import Quickview from "~/components/shared/Quickview";
import { useOptions } from "~/store/options/optionsHooks";

interface Props extends PropsWithChildren<{}> {}

function Layout(props: Props) {
    const { children } = props;
    const { desktopHeaderLayout, desktopHeaderScheme, mobileHeaderVariant } = useOptions();
    const desktopVariantClass = `${desktopHeaderLayout}-${desktopHeaderScheme}`;
    const mobileVariantClass = `mobile-${mobileHeaderVariant}`;

    const classes = classNames(
        "site",
        `site--desktop-header--${desktopVariantClass}`,
        `site--mobile-header--${mobileVariantClass}`,
    );

    return (
        <div className={classes}>
            <div className="site__container">
                {/* SOLUCIÓN: Agregamos d-lg-none para que DESAPAREZCA en escritorio */}
                <header className="site__mobile-header d-block d-lg-none">
                    <MobileHeader />
                </header>

                {/* SOLUCIÓN: Agregamos d-none d-lg-block para que SOLO aparezca en escritorio */}
                <header className="site__header d-none d-lg-block">
                    <Header />
                </header>

                <div className="site__body">{children}</div>

                <footer className="site__footer">
                    <Footer />
                </footer>
            </div>

            <MobileMenu />
            <Quickview />
        </div>
    );
}
export default Layout;