import { Video, Mic } from "lucide-react";
import { useRecordingMode } from "@/hooks/use-recording-mode";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";

interface ControlsIndicatorProps {
  type: "reply" | "new";
}
export default function ControlsIndicator({ type }: ControlsIndicatorProps) {
  const [recordingMode, setRecordingMode] = useRecordingMode();

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