import { VscArrowLeft, VscArrowRight } from "react-icons/vsc";
import useStore from "../../lib/FlowEditor/FlowEditorStore";
import { GenericNodeComponent } from "./nodes/Node";

const Panel = () => {
  const { panelClosed, togglePanelState } = useStore();

  const PanelButton = () => {
    return (
      <div
        className={`flow-panel-button ${panelClosed ? "rotate-180" : ""}`}
        onClick={togglePanelState}
      >
        <VscArrowLeft size={40} />
      </div>
    );
  };

  return (
    <aside
      className={`flow-panel ${panelClosed ? "w-0" : "w-60"} duration-300`}
    >
      <PanelButton />
      {!panelClosed && (
        <>
          <GenericNodeComponent />
        </>
      )}
    </aside>
  );
};

export default Panel;