import { Video, Mic } from "lucide-react";
import { useRecordingStore } from "@/stores/recording-store";
import { cn } from "@/lib/utils";

export function ReplyIndicator() {
  const recordingMode = useRecordingStore((s) => s.recordingMode);
  const setRecordingMode = useRecordingStore((s) => s.setRecordingMode);

  return (
    <div className="flex items-center gap-2">
      <button
        type="button"
        onClick={() =>
          setRecordingMode(recordingMode === "video" ? "audio" : "video")
        }
        className={cn(
          "rounded p-1 transition-colors hover:bg-white/20",
          "text-white/60 hover:text-white/90",
        )}
        title={
          recordingMode === "video"
            ? "Switch to audio-only"
            : "Switch to video"
        }
      >
        {recordingMode === "video" ? (
          <Video className="h-3.5 w-3.5" />
        ) : (
          <Mic className="h-3.5 w-3.5" />
        )}
      </button>
      <div className="text-muted-foreground text-xs">
        Hold{" "}
        <kbd
          className={cn(
            "bg-muted rounded px-1.5 py-0.5 font-mono text-xs",
          )}
        >
          `
        </kbd>{" "}
        to reply · Press{" "}
        <kbd
          className={cn(
            "bg-muted rounded px-1.5 py-0.5 font-mono text-xs",
          )}
        >
          T
        </kbd>{" "}
        to text
      </div>
    </div>
  );
}
