import { AVATAR_COLORS, getMember } from "../data";
import type { Member } from "../types";

export function initialsOf(name: string): string {
  const parts = name.trim().split(/\s+/);
  return ((parts[0]?.[0] ?? "") + (parts[1]?.[0] ?? "")).toUpperCase();
}

export function Avatar({ member, size = 20 }: { member: Member; size?: number }) {
  return (
    <span
      className="avatar"
      aria-hidden="true"
      title={`${member.name} — ${member.role}`}
      style={{
        width: size,
        height: size,
        background: AVATAR_COLORS[member.id] ?? "#5c6f80",
        fontSize: Math.round(size * 0.42),
      }}
    >
      {initialsOf(member.name)}
    </span>
  );
}

export function AvatarEmpty({ size = 18 }: { size?: number }) {
  return <span className="avatar avatar--empty" aria-hidden="true" style={{ width: size, height: size }} />;
}

export function AvatarStack({ members }: { members: Member[] }) {
  return (
    <div className="avatar-stack" role="group" aria-label={`Team: ${members.map((m) => m.name).join(", ")}`}>
      {members.map((m) => (
        <span key={m.id} title={`${m.name} — ${m.role}`}>
          <Avatar member={m} size={22} />
        </span>
      ))}
    </div>
  );
}

export { getMember };