import Image from "next/image";
import { getTeamLogoUrl } from "@/lib/utils";
import { cn } from "@/lib/utils";

export function TeamBadge({
  name,
  logoPath,
  size = "md",
  className,
}: {
  name: string;
  logoPath?: string | null;
  size?: "sm" | "md" | "lg";
  className?: string;
}) {
  const logoUrl = getTeamLogoUrl(logoPath);
  const sizes = { sm: 24, md: 32, lg: 48 };
  const dim = sizes[size];

  return (
    <div className={cn("flex items-center gap-2", className)}>
      <div
        className="relative flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-white/10"
        style={{ width: dim, height: dim }}
      >
        {logoUrl ? (
          <Image src={logoUrl} alt={name} width={dim} height={dim} className="object-cover" />
        ) : (
          <span className="text-xs font-bold text-cyan-400">
            {name.slice(0, 2).toUpperCase()}
          </span>
        )}
      </div>
      <span className="truncate font-medium">{name}</span>
    </div>
  );
}