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

interface TeamAvatarProps {
  teamId: string;
  teamName: string;
  logoUrl?: string | null;
  size?: "sm" | "md" | "lg";
}

const sizeClasses = {
  sm: "h-6 w-6 text-[10px]",
  md: "h-9 w-9 text-sm",
  lg: "h-12 w-12 text-base",
};

export function TeamAvatar({ teamId, teamName, logoUrl, size = "md" }: TeamAvatarProps) {
  if (logoUrl) {
    return (
      <img
        src={logoUrl}
        alt={teamName}
        className={`${sizeClasses[size]} object-cover shrink-0`}
      />
    );
  }

  const color = avatarColor(teamId);
  const initials =
    teamName
      .split(/\s+/)
      .filter(Boolean)
      .slice(0, 2)
      .map((w) => w[0].toUpperCase())
      .join("") || "?";

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