import { Video, Mic } from "lucide-react";
import { useMediaSettingsStore } from "@/stores/media-settings-store";

export function VideoAudioToggle() {
  const recordingMode = useMediaSettingsStore((s) => s.recordingMode);
  const setRecordingMode = useMediaSettingsStore((s) => s.setRecordingMode);

  return (
    <span
      role="button"
      onClick={() =>
        setRecordingMode(recordingMode === "video" ? "audio" : "video")
      }
      title={
        recordingMode === "video" ? "Switch to audio-only (V)" : "Switch to video (V)"
      }
      className="cursor-pointer transition-colors hover:text-white/80"
    >
      <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
        V
      </kbd>{" "}
      {recordingMode === "video" ? (
        <>
          <Video className="inline size-3" /> video
        </>
      ) : (
        <>
          <Mic className="inline size-3" /> audio
        </>
      )}
    </span>
  );
}