const AVATAR_COLORS = [
  "#adf661",
  "#2ce1c1",
  "#8b5cf6",
  "#f59e0b",
  "#ef4444",
  "#3b82f6",
];

function hashLeagueId(id: string): number {
  let hash = 0;
  for (let i = 0; i < id.length; i++) {
    hash = (hash * 31 + id.charCodeAt(i)) & 0xffff;
  }
  return hash;
}

interface LeagueAvatarProps {
  leagueId: string;
  leagueName: string;
  /** Tailwind size classes, e.g. "h-10 w-10" (default) or "h-5 w-5" */
  className?: string;
  /** Font size class, e.g. "text-sm" (default) or "text-[10px]" */
  textClassName?: string;
}

export function LeagueAvatar({
  leagueId,
  leagueName,
  className = "h-10 w-10",
  textClassName = "text-sm",
}: LeagueAvatarProps) {
  const color = AVATAR_COLORS[hashLeagueId(leagueId) % AVATAR_COLORS.length];
  const initials =
    leagueName
      .split(/\s+/)
      .filter(Boolean)
      .slice(0, 2)
      .map((w) => w[0].toUpperCase())
      .join("") || "?";

  return (
    <div
      role="img"
      aria-label={leagueName}
      className={`flex shrink-0 items-center justify-center rounded-none font-bold ${className} ${textClassName}`}
      style={{ backgroundColor: "#000", color }}
    >
      {initials}
    </div>
  );
}