"use client";

import { Mic, MicOff, PhoneOff, Volume2, VolumeX, Loader2 } from "lucide-react";

export function Controls({
  micOn,
  speakerOn,
  leaving,
  onToggleMic,
  onToggleSpeaker,
  onLeave,
}: {
  micOn: boolean;
  speakerOn: boolean;
  leaving?: boolean;
  onToggleMic: () => void;
  onToggleSpeaker: () => void;
  onLeave: () => void;
}) {
  return (
    <div className="flex items-center justify-center gap-3 sm:gap-4">
      <button
        onClick={onToggleMic}
        aria-label={micOn ? "Mikrofonu kapat" : "Mikrofonu aç"}
        className={`flex h-14 w-14 items-center justify-center rounded-full transition active:scale-95 sm:h-16 sm:w-16 ${
          micOn
            ? "bg-white text-black hover:bg-zinc-200"
            : "bg-red-500 text-white hover:bg-red-600"
        }`}
      >
        {micOn ? <Mic className="h-6 w-6" /> : <MicOff className="h-6 w-6" />}
      </button>

      <button
        onClick={onToggleSpeaker}
        aria-label={speakerOn ? "Sesi kapat" : "Sesi aç"}
        className={`flex h-14 w-14 items-center justify-center rounded-full border transition active:scale-95 sm:h-16 sm:w-16 ${
          speakerOn
            ? "border-white/10 bg-white/10 text-white hover:bg-white/15"
            : "border-white/10 bg-white/5 text-zinc-500 hover:bg-white/10"
        }`}
      >
        {speakerOn ? <Volume2 className="h-6 w-6" /> : <VolumeX className="h-6 w-6" />}
      </button>

      <button
        onClick={onLeave}
        disabled={leaving}
        aria-label="Görüşmeden ayrıl"
        className="flex h-14 items-center gap-2 rounded-full bg-red-500 px-6 font-semibold text-white transition hover:bg-red-600 active:scale-95 disabled:opacity-60 sm:h-16 sm:px-8"
      >
        {leaving ? (
          <Loader2 className="h-6 w-6 animate-spin" />
        ) : (
          <PhoneOff className="h-6 w-6" />
        )}
        <span className="text-sm sm:text-base">Ayrıl</span>
      </button>
    </div>
  );
}