import { avatarColor } from "~/lib/avatar-colors";

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 = avatarColor(leagueId);
  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>
  );
}