import React from 'react';

const memberSections = [
  {
    title: 'Foundation Team',
    count: 8,
    members: [
      { id: 1, name: 'Anderson', tag: 'Anderson#0001', initial: 'A', gradient: 'linear-gradient(135deg, #ff0000, #cc0000)', status: 'online', banner: '#ff0000', customStatus: '🔥 Building AeThex', badge: 'Founder', roles: [{ name: 'Founder', color: '#ff0000' }, { name: 'Foundation', color: '#cc0000' }], about: 'Creator of AeThex ecosystem. Building the future of developer tools.' },
      { id: 2, name: 'Trevor', tag: 'Trevor#0042', initial: 'T', gradient: 'linear-gradient(135deg, #ff0000, #cc0000)', status: 'online', banner: '#cc0000', badge: 'Foundation', roles: [{ name: 'Foundation', color: '#cc0000' }, { name: 'Developer', color: '#5865f2' }], about: 'Lead developer on authentication systems.' },
    ],
  },
  {
    title: 'Labs Team',
    count: 12,
    members: [
      { id: 3, name: 'Sarah', tag: 'Sarah#1337', initial: 'S', gradient: 'linear-gradient(135deg, #ffa500, #ff8c00)', status: 'labs', banner: '#ffa500', activity: 'Testing v2.0', badge: 'Labs', roles: [{ name: 'Labs', color: '#ffa500' }, { name: 'Tester', color: '#3ba55d' }], about: 'Experimental features lead. Breaking things so you don\'t have to.' },
    ],
  },
  {
    title: 'Developers',
    count: 47,
    members: [
      { id: 4, name: 'Marcus', tag: 'Marcus#2048', initial: 'M', gradient: 'linear-gradient(135deg, #0066ff, #003380)', status: 'in-game', activity: 'Building', banner: '#0066ff', roles: [{ name: 'Developer', color: '#5865f2' }], about: 'Full-stack developer passionate about clean code.' },
      { id: 5, name: 'DevUser_2847', tag: 'DevUser_2847#2847', initial: 'D', status: 'online', roles: [{ name: 'Member', color: '#99aab5' }] },
    ],
  },
  {
    title: 'Community',
    count: 61,
    members: [
      { id: 6, name: 'JohnDev', tag: 'JohnDev#9999', initial: 'J', status: 'idle', roles: [{ name: 'Member', color: '#99aab5' }] },
    ],
  },
];

export default function MemberSidebar({ onMemberClick }) {
  return (
    <div className="member-sidebar">
      <div className="member-header">Members — 128</div>
      
      <div className="member-list">
        {memberSections.map((section) => (
          <div key={section.title} className="member-section">
            <div className="member-section-title">{section.title} — {section.count}</div>
            {section.members.map((member) => (
              <div 
                key={member.id} 
                className="member-item"
                onClick={() => onMemberClick?.(member)}
                style={{ cursor: 'pointer' }}
              >
                <div 
                  className="member-avatar-small"
                  style={member.gradient ? { background: member.gradient } : undefined}
                >
                  {member.initial}
                  {member.status && (
                    <div className={`online-indicator ${member.status}`}></div>
                  )}
                </div>
                <div className="member-name">{member.name}</div>
                {member.activity && (
                  <div className="member-activity">{member.activity}</div>
                )}
              </div>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}