import React from 'react';
import { Users } from 'lucide-react';
import { Badge } from './ui/badge';
import clareAvatar from '../assets/dfe44dab3ad8cd93953eac4a3e68bd1a5f999653.png';
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) => {
          const isAI = !!member.isAI;
          return (
          <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 ${
              isAI 
                ? 'overflow-hidden bg-white' 
                : 'bg-muted'
            }`}>
              {isAI ? (
                <img src={clareAvatar} alt="Clare" className="w-full h-full object-cover" />
              ) : (
                <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>
                {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>
  );
}