import { useState } from "react";
import ToggleHeader from "../../../ui/inputs/ToggleHeader";
import Data from "./data/Data";
import Design from "./design/Design";

const Visualization = () => {
  const [activeOption, setActiveOption] = useState("Data");

  const handleToggleClick = (option: string) => {
    setActiveOption(option); // Update the active option
  };

  return (
    <div className="visualization-right-sideBar">
      <ToggleHeader
        options={["Data", "Design"]}
        activeOption={activeOption}
        handleClick={handleToggleClick}
      />
      <div className="sidebar-right-content-container">
        {activeOption === "Data" ? <Data /> : <Design />}
      </div>
    </div>
  );
};

export default Visualization;