"use client";
import { useSystemStore } from "@/stores/useSystemStore";
import { FC, memo, ReactNode } from "react";
import HeaderTitle from "./HerderTitle";
import styles from "./style.module.scss";
// import HeaderRight from "@/components/Header/HeaderRight";
import dynamic from "next/dynamic";

const HeaderRight = dynamic(() => import("@/components/Header/HeaderRight"));
/**
 * @description HeaderProps
 * @param {boolean} headerPlaceholder 是否展示展位元素00
 * @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, setCollapse } = useSystemStore((state) => ({
        isCollapse: state.isCollapse,
        setCollapse: state.setCollapse,
    }));
    const menuHandler = () => {
        setCollapse(!isCollapse);
    };
    // const clx = clsx(isCollapse ? styles.cross : "");
    return (
        <header className={styles.headerWrap}>
            <div className={styles.headerMain}>
                <div className={styles.headerLeft} onClick={menuHandler}>
                    <i className="iconfont icon-caidan1 text-8 text-[#87ccd9]"></i>
                    {/* <div>
                        <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);