"use client";
import HeaderRight from "@/components/Header/HeaderRight";
import { useSystemStore } from "@/stores/useSystemStore";
import clsx from "clsx";
import { FC, memo, ReactNode } from "react";
import { useSwiper } from "swiper/react";
import HeaderTitle from "./HerderTitle";
import styles from "./style.module.scss";
/**
 * @description HeaderProps
 * @param {boolean} headerPlaceholder 是否展示展位元素
 * @param {() => ReactNode} headerRender 自定义渲染
 */
export interface HeaderProps {
    // headerRender?: () => ReactNode;
    // menuHandler?: () => void;
    // menuRender?: () => ReactNode;
    visibleLanguage?: boolean;
}
const Header: FC<HeaderProps> = (props) => {
    const { visibleLanguage = true } = props;
    // 展开按钮
    const isCollapse = useSystemStore((state) => state.isCollapse);
    const swiper = useSwiper();
    const menuHandler = () => {
        if (isCollapse) {
            swiper.slideNext();
        } else {
            swiper.slidePrev();
        }
    };
    const clx = clsx(isCollapse ? styles.cross : "");
    return (
        <header className={styles.headerWrap}>
            <div className={styles.headerMain}>
                <div className={styles.headerLeft} onClick={menuHandler}>
                    <div className={clx}>
                        <div className={styles.bar}></div>
                        <div className={styles.bar} style={{ width: "0.1389rem" }}></div>
                        <div className={styles.bar}></div>
                    </div>
                </div>

                <HeaderTitle visibleLanguage={visibleLanguage} />
                <HeaderRight />
            </div>
        </header>
    );
};
export default memo(Header);
