export type Member = {
    id: string;
    name: string;
    role: "admin" | "mod" | "sub" | "viewer";
    avatar?: string;
};

const roleStyles = {
    admin:  { label: "ADMIN",  cls: "text-red-400 bg-red-500/10 border-red-500/30" },
    mod:    { label: "MOD",    cls: "text-yellow-400 bg-yellow-400/10 border-yellow-400/30" },
    sub:    { label: "SUB",    cls: "text-acid-green bg-acid-green/10 border-acid-green/30" },
    viewer: { label: "VIEWER", cls: "text-blue-400 bg-blue-400/10 border-blue-400/30" },
};

const AVATARS = ["🗡️", "🛡️", "🏹", "⚔️", "🔥", "💀", "🐉", "⚡"];

const MOCK_MEMBERS: Member[] = [
    { id: "1", name: "HunterX42",     role: "sub" },
    { id: "2", name: "IronWarden",    role: "mod" },
    { id: "3", name: "NoviceHunter",  role: "viewer" },
    { id: "4", name: "BladeRunner7",  role: "sub" },
    { id: "5", name: "EmberWolf",     role: "viewer" },
    { id: "6", name: "ShadowCrawler", role: "viewer" },
];

export default function MemberList({ members = MOCK_MEMBERS }: { members?: Member[] }) {
    return (
        <div className="flex flex-col gap-2 max-h-[320px] overflow-y-auto pr-1">
            {members.map((m, i) => {
                const role = roleStyles[m.role];
                const avatar = AVATARS[i % AVATARS.length];
                return (
                    <div
                        key={m.id}
                        className="flex items-center gap-3 px-3 py-2 bg-wy-surface border border-wy-border rounded-md hover:bg-wy-surface/50 transition-colors duration-150"
                    >
                        <div className="w-8 h-8 rounded-full bg-wy-dark border border-wy-border flex items-center justify-center text-sm flex-shrink-0">
                            {avatar}
                        </div>
                        <div className="flex-1 text-sm text-wy-text-primary font-mono">{m.name}</div>
                        <span className={`text-xs font-mono tracking-wider px-2 py-0.5 border rounded-md ${role.cls}`}>
              {role.label}
            </span>
                    </div>
                );
            })}
        </div>
    );
}