"use client";

import { HuddleParticipant } from "@/lib/api";
import { Mic, MicOff, Video, VideoOff } from "lucide-react";

interface HuddleParticipantsProps {
  participants: HuddleParticipant[];
  currentUserId?: string;
}

export function HuddleParticipants({ participants, currentUserId }: HuddleParticipantsProps) {
  return (
    <div className="flex flex-col gap-2 p-4">
      <h3 className="text-xs font-semibold text-gray-500 uppercase mb-1">
        Participants ({participants.length})
      </h3>
      {participants.length === 0 ? (
        <p className="text-sm text-gray-400">No participants yet.</p>
      ) : (
        participants.map((p) => {
          const name = p.user?.name || p.user?.display_name || p.user?.email || "Unknown";
          const isYou = p.user_id === currentUserId;
          return (
            <div key={p.user_id} className="flex items-center gap-3 p-2 rounded-md hover:bg-gray-50 transition-colors">
              {/* Avatar */}
              <div className="relative">
                <div className="w-10 h-10 rounded-full bg-slack-purple text-white flex items-center justify-center font-bold text-sm">
                  {name[0]?.toUpperCase() || "U"}
                </div>
                {/* Status dot */}
                <div className="absolute bottom-0 right-0 w-3 h-3 rounded-full bg-slack-green border-2 border-white" />
              </div>

              {/* Name */}
              <div className="flex-1 min-w-0">
                <div className="flex items-center gap-1">
                  <span className="text-sm font-medium text-gray-800 truncate">{name}</span>
                  {isYou && <span className="text-xs text-gray-400">(you)</span>}
                </div>
              </div>

              {/* Status icons */}
              <div className="flex items-center gap-1.5">
                {p.muted ? (
                  <MicOff size={14} className="text-slack-red" />
                ) : (
                  <Mic size={14} className="text-gray-400" />
                )}
                {p.video_on && <Video size={14} className="text-gray-400" />}
              </div>
            </div>
          );
        })
      )}
    </div>
  );
}