import { useRef } from "react";
import styles from "./styles.module.scss"
import { useSchemeColorByElement } from "@/hooks/useSchemeColorByElement";
import { Outlet } from "react-router-dom";
import Header from "@/components/CompatibilityV2/components/Header";
import routes from "@/routes";

const isBackButtonVisibleRoutes = [
    routes.client.profileSubscriptions(),
];

function Layout() {
    const mainRef = useRef<HTMLDivElement>(null);
    useSchemeColorByElement(mainRef.current, "section.page, .page, section", [
        location,
    ]);

    const getIsBackButtonVisible = () => {
        for (const route of isBackButtonVisibleRoutes) {
            if (location.pathname.includes(route)) return true;
        }
        return false;
    };

    return (
        <>
            <main className={`${styles.main} content`} ref={mainRef}>
                <Header
                    className={styles.header}
                    classNameTitle={styles["header-title"]}
                    isBackButtonVisible={getIsBackButtonVisible()}
                />
                {/* <Suspense fallback={<LoadingPage />}> */}
                <section className={styles.page}>
                    <Outlet />
                </section>
                {/* </Suspense> */}
            </main>
        </>
    );
}

export default Layout