Dwinzo_dev/app/src/components/layout/controls/ControlsPlayer.tsx

import React, { useState } from "react";
import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
import useModuleStore from "../../../store/useModuleStore";
import { PlayIcon } from "../../icons/ShortcutIcons";
import InputToggle from "../../ui/inputs/InputToggle";
import { EyeCloseIcon, WalkIcon } from "../../icons/ExportCommonIcons";
import { ExitIcon } from "../../icons/SimulationIcons";

const ControlsPlayer = () => {
  const { setIsPlaying } = usePlayButtonStore();
  const { activeModule } = useModuleStore();
  const [walkMode, setWalkMode] = useState(false);

  const changeCamMode = () => {
    setWalkMode(!walkMode);
    console.log("switch camera mode to first person");
  };
  return (
    <div className="controls-player-container">
      <div className="controls-left">
        <PlayIcon />
        <div className="label">Running {activeModule}...</div>
      </div>

      <div className="controls-right">
        <div className="walkMode-wrapper">
          <WalkIcon />
          <InputToggle
            value={walkMode}
            inputKey="1"
            label="Walk Mode"
            onClick={changeCamMode}
          />
        </div>
        <button
          id="controls-player-play-button"
          className="btn-wrapper"
          onClick={() => setIsPlaying(false)}
        >
          <div className="icon">
            <ExitIcon />
          </div>
          Exit
        </button>
        <div className="btn-wrapper">
          <div className="icon">
            <EyeCloseIcon />
          </div>
          Hide
        </div>
      </div>
    </div>
  );
};

export default ControlsPlayer;