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