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

const Header: React.FC = () => {
  const { toggleUI, setToggleUI } = useToggleStore();
  return (
    <div className="header-container">
      <div className="header-content">
        <div className="logo-container">
          <LogoIcon />
        </div>
        <div className="header-title">
          <FileMenu />
        </div>
      </div>
      <div
        className={`toggle-sidebar-ui-button ${!toggleUI ? "active" : ""}`}
        onClick={() => {
          setToggleUI(!toggleUI);
        }}
      >
        <ToggleSidebarIcon />
      </div>
    </div>
  );
};

export default Header;