import { Video, Mic } from "lucide-react";
import { cn } from "@/lib/utils";
import { useMediaSettingsStore } from "@/stores/media-settings-store";
import { Button } from "@/components/ui/button";
import { PropsWithChildren } from "react";

interface ControlsIndicatorProps extends PropsWithChildren {
  type: "reply" | "new";
}
export default function ControlsIndicator({ type, children }: ControlsIndicatorProps) {
  const recordingMode = useMediaSettingsStore((s) => s.recordingMode);
  const setRecordingMode = useMediaSettingsStore((s) => s.setRecordingMode);

  return (
    <div className="flex items-center gap-2 text-xs rounded-full pl-1 pr-3 py-1 bg-black/30 backdrop-blur-sm m-2">
      <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>
      {children ? <div className="flex-1">{children}</div> :
        <div className="flex-1" />
      }
      {children && <span className="text-muted-foreground">·</span>}
      <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>
  );
}