import React from "react";
import useModuleStore from "../../store/useModuleStore";
import {
  BuilderIcon,
  CartIcon,
  SimulationIcon,
  VisualizationIcon,
} from "../icons/ExportModuleIcons";
import { usePlayButtonStore } from "../../store/usePlayButtonStore";

const ModuleToggle: React.FC = () => {
  const { activeModule, setActiveModule } = useModuleStore();
  const { isPlaying, setIsPlaying } = usePlayButtonStore();

  return (
    <div className="module-toggle-container">
      <div
        className={`module-list ${activeModule === "builder" && "active"}`}
        onClick={() => setActiveModule("builder")}
      >
        <div className="icon">
          <BuilderIcon isActive={activeModule === "builder"} />
        </div>
        <div className="module">Builder</div>
      </div>
      <div
        className={`module-list ${activeModule === "simulation" && "active"}`}
        onClick={() => setActiveModule("simulation")}
      >
        <div className="icon">
          <SimulationIcon isActive={activeModule === "simulation"} />
        </div>
        <div className="module">Simulation</div>
      </div>
      <div
        className={`module-list ${
          activeModule === "visualization" && "active"
        }`}
        onClick={() => setActiveModule("visualization")}
      >
        <div className="icon">
          <VisualizationIcon isActive={activeModule === "visualization"} />
        </div>
        <div className="module">Visualization</div>
      </div>
      <div
        className={`module-list ${activeModule === "market" && "active"}`}
        onClick={() => setActiveModule("market")}
      >
        <div className="icon">
          <CartIcon isActive={activeModule === "market"} />
        </div>
        <div className="module">Market Place</div>
      </div>
    </div>
  );
};

export default ModuleToggle;