import React, { useState } from "react";
import RenameInput from "./inputs/RenameInput";
import { ArrowIcon } from "../icons/ExportCommonIcons";
import MenuBar from "./menu/menu";
import { ProjectIcon } from "../icons/HeaderIcons";

const FileMenu: React.FC = () => {
  const [openMenu, setOpenMenu] = useState(false);
  return (
    <div className="project-dropdowm-container">
      <div className="project-name">
        <div className="icon">
          <ProjectIcon />
        </div>
        <RenameInput value="untitled" />
      </div>
      <div
        className="more-options-button"
        onClick={() => {
          setOpenMenu(!openMenu);
        }}
      >
        <ArrowIcon />
        {openMenu && <MenuBar setOpenMenu={setOpenMenu} />}
      </div>
    </div>
  );
};

export default FileMenu;
