import { Video, Mic } from 'lucide-react';
import { KeyHint } from '@/components/key-hint';
import { useMediaSettingsStore } from '@/stores/media-settings-store';

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

  return (
    <KeyHint
      keys="V"
      onClick={() =>
        setRecordingMode(recordingMode === 'video' ? 'audio' : 'video')
      }
      title={
        recordingMode === 'video'
          ? 'Switch to audio-only (V)'
          : 'Switch to video (V)'
      }
    >
      {recordingMode === 'video' ? (
        <>
          <Video className="inline size-3" /> video
        </>
      ) : (
        <>
          <Mic className="inline size-3" /> audio
        </>
      )}
    </KeyHint>
  );
}