import styles from "./Topbar.module.scss";
import { useIsOpenedConfigPage } from "@store";
import ArrowLeftSvg from "@images/arrow_left.svg?react";

import { TitleBox } from "./title_box/TitleBox";
import { SectionTitleBox } from "./section_title_box/SectionTitleBox";
import { CompactSwitchBox } from "./compact_switch_box/CompactSwitchBox";

export const Topbar = () => {
    const { updateIsOpenedConfigPage } = useIsOpenedConfigPage();
    const closeConfigPage = () => {
        console.log("close");
        updateIsOpenedConfigPage(false);

    };

    return (
        <div className={styles.container}>
            <div className={styles.wrapper} onClick={() => closeConfigPage()}>
                <div className={styles.go_back_button}>
                    <ArrowLeftSvg className={styles.arrow_left_svg} />
                    <p className={styles.go_back_text}>Go Back</p>
                </div>


                {/* <TitleBox />
                <SectionTitleBox />
                <CompactSwitchBox /> */}
            </div>
        </div>
    );
};