import React from "react";
import { ToggleSidebarIcon } from "../../icons/HeaderIcons";
import { LogoIcon } from "../../icons/Logo";
import FileMenu from "../../ui/FileMenu";
import useToggleStore from "../../../store/useUIToggleStore";
import useModuleStore from "../../../store/useModuleStore";

const Header: React.FC = () => {
  const { toggleUI, setToggleUI } = useToggleStore();
  const { activeModule } = useModuleStore();

  return (
    <div className="header-container">
      <div className="header-content">
        <div className="logo-container">
          <LogoIcon />
        </div>
        <div className="header-title">
          <FileMenu />
        </div>
      </div>
      <button
        className={`toggle-sidebar-ui-button ${!toggleUI ? "active" : ""}`}
        onClick={() => {
          if (activeModule !== "market") {
            setToggleUI(!toggleUI);
            localStorage.setItem("navBarUi", JSON.stringify(!toggleUI));
          }
        }}
      >
        <ToggleSidebarIcon />
      </button>
    </div>
  );
};

export default Header;