import { useState } from "react";
import ToggleHeader from "../../../../ui/inputs/ToggleHeader";
import Widgets2D from "./Widgets2D";
import Widgets3D from "./Widgets3D";
import WidgetsFloating from "./WidgetsFloating";

const Widgets = () => {
  const [activeOption, setActiveOption] = useState("2D");

  const handleToggleClick = (option: string) => {
    setActiveOption(option);
  };

  return (
    <div className="widget-left-sideBar">
      <ToggleHeader
        options={["2D", "3D", "Floating"]}
        activeOption={activeOption}
        handleClick={handleToggleClick}
      />
      {activeOption === "2D" && <Widgets2D />}
      {activeOption === "3D" && <Widgets3D />}
      {activeOption === "Floating" && <WidgetsFloating />}
    </div>
  );
};

export default Widgets;