export interface SportIconProps {
  sport: { name: string; iconUrl: string | null };
  size?: "sm" | "md";
}

export function SportIcon({ sport, size = "md" }: SportIconProps) {
  const cls = size === "sm" ? "w-4 h-4" : "w-5 h-5";
  if (sport.iconUrl) {
    const isAbsolute = sport.iconUrl.startsWith("data:") || sport.iconUrl.startsWith("http") || sport.iconUrl.startsWith("/");
    const src = isAbsolute ? sport.iconUrl : `/sports-icons/${sport.iconUrl}`;
    return (
      <img
        src={src}
        alt={sport.name}
        className={`${cls} object-contain shrink-0`}
      />
    );
  }
  return <span className={`${cls} rounded-sm bg-muted shrink-0 inline-block`} aria-hidden />;
}