import ToggleHeader from "../../../../ui/inputs/ToggleHeader";
import Widgets2D from "./Widgets2D";
import Widgets3D from "./Widgets3D";
import WidgetsFloating from "./WidgetsFloating";
import { useWidgetSubOption } from "../../../../../store/store";

const Widgets = () => {
  const { widgetSubOption, setWidgetSubOption } = useWidgetSubOption();

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

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

export default Widgets;