import { Role, ROLES } from '@/lib/stage';

export function MemberChips({ members }: { members: { role: Role; name: string }[] }) {
  if (!members || members.length === 0) return null;
  const grouped = ROLES.reduce<Record<Role, string[]>>((acc, r) => {
    acc[r.key] = members.filter((m) => m.role === r.key).map((m) => m.name);
    return acc;
  }, {} as Record<Role, string[]>);
  return (
    <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px]">
      {ROLES.map((r) => {
        const names = grouped[r.key];
        if (!names || names.length === 0) return null;
        return (
          <span key={r.key} className="inline-flex items-center gap-1 text-[var(--ink-soft)]">
            <span className="font-medium text-[var(--ink-muted)]">{r.label}</span>
            {names.join('/')}
          </span>
        );
      })}
    </div>
  );
}