import React from 'react';
import { Users, Bot } from 'lucide-react';
import { Badge } from './ui/badge';
import type { GroupMember } from '../App';

interface GroupMembersProps {
  members: GroupMember[];
}

export function GroupMembers({ members }: GroupMembersProps) {
  return (
    <div className="space-y-3">
      <div className="flex items-center gap-2">
        <Users className="h-4 w-4 text-muted-foreground" />
        <h3 className="text-sm">Group Members ({members.length})</h3>
      </div>
      
      <div className="space-y-2">
        {members.map((member) => (
          <div
            key={member.id}
            className="flex items-center gap-3 p-2 rounded-lg hover:bg-muted/50 transition-colors"
          >
            {/* Avatar */}
            <div className={`w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 ${
              member.isAI 
                ? 'bg-gradient-to-br from-purple-500 to-blue-500' 
                : 'bg-muted'
            }`}>
              {member.isAI ? (
                <Bot className="h-4 w-4 text-white" />
              ) : (
                <span className="text-sm">
                  {member.name.split(' ').map(n => n[0]).join('').toUpperCase()}
                </span>
              )}
            </div>
            
            {/* Member Info */}
            <div className="flex-1 min-w-0">
              <div className="flex items-center gap-2">
                <p className="text-sm truncate">{member.name}</p>
                {member.isAI && (
                  <Badge variant="secondary" className="text-xs">AI</Badge>
                )}
              </div>
              <p className="text-xs text-muted-foreground truncate">{member.email}</p>
            </div>
            
            {/* Online Status */}
            <div className="w-2 h-2 rounded-full bg-green-500 flex-shrink-0" title="Online" />
          </div>
        ))}
      </div>
    </div>
  );
}