"use client";

import { Mic, MicOff, Video, VideoOff, Monitor, PhoneOff, Phone } from "lucide-react";

interface HuddleControlsProps {
  muted: boolean;
  videoOn: boolean;
  onToggleMute: () => void;
  onToggleVideo: () => void;
  onScreenShare: () => void;
  onLeave: () => void;
  onEnd?: () => void;
  canEnd?: boolean;
}

export function HuddleControls({
  muted,
  videoOn,
  onToggleMute,
  onToggleVideo,
  onScreenShare,
  onLeave,
  onEnd,
  canEnd,
}: HuddleControlsProps) {
  return (
    <div className="flex items-center justify-center gap-3 px-4 py-4 bg-gray-900 rounded-t-lg">
      {/* Mute */}
      <button
        onClick={onToggleMute}
        className={`w-12 h-12 rounded-full flex items-center justify-center transition-colors ${
          muted ? "bg-slack-red text-white" : "bg-gray-700 text-white hover:bg-gray-600"
        }`}
        title={muted ? "Unmute" : "Mute"}
      >
        {muted ? <MicOff size={22} /> : <Mic size={22} />}
      </button>

      {/* Video */}
      <button
        onClick={onToggleVideo}
        className={`w-12 h-12 rounded-full flex items-center justify-center transition-colors ${
          videoOn ? "bg-slack-purple text-white hover:bg-slack-darkpurple" : "bg-gray-700 text-white hover:bg-gray-600"
        }`}
        title={videoOn ? "Turn off video" : "Turn on video"}
      >
        {videoOn ? <Video size={22} /> : <VideoOff size={22} />}
      </button>

      {/* Screen share */}
      <button
        onClick={onScreenShare}
        className="w-12 h-12 rounded-full bg-gray-700 text-white hover:bg-gray-600 flex items-center justify-center transition-colors"
        title="Share screen"
      >
        <Monitor size={22} />
      </button>

      {/* Leave */}
      <button
        onClick={onLeave}
        className="w-12 h-12 rounded-full bg-slack-red text-white hover:bg-red-700 flex items-center justify-center transition-colors"
        title="Leave huddle"
      >
        <PhoneOff size={22} />
      </button>

      {/* End (for host) */}
      {canEnd && onEnd && (
        <button
          onClick={onEnd}
          className="w-12 h-12 rounded-full bg-slack-red text-white hover:bg-red-700 flex items-center justify-center transition-colors"
          title="End huddle"
        >
          <Phone size={22} className="rotate-[135deg]" />
        </button>
      )}
    </div>
  );
}