import Image from "next/image";

export default function BeltBadge({
  colorVar,
  label,
  size = "md",
  iconUrl,
}: {
  colorVar: string;
  label: string;
  size?: "sm" | "md";
  iconUrl?: string;
}) {
  // Belt-knot icons are ~1.098:1 (358x326 autocropped source, the ratio shared
  // by 7 of the 8 belt colors — only black differs, at ~0.79:1) — keep that
  // ratio so next/image doesn't warn about a modified-but-not-matching
  // width/height. object-contain below preserves each image's own aspect
  // ratio within this box regardless, so a slightly-off box for black is fine.
  const iconHeight = size === "sm" ? 20 : 28;
  const iconWidth = Math.round(iconHeight * (358 / 326));

  return (
    <span className="inline-flex items-center gap-2">
      {iconUrl ? (
        <Image
          src={iconUrl}
          alt=""
          width={iconWidth}
          height={iconHeight}
          className="shrink-0 object-contain"
          aria-hidden="true"
        />
      ) : (
        <span
          className={`inline-block shrink-0 rounded-sm border border-black/10 ${size === "sm" ? "h-3 w-6" : "h-4 w-9"}`}
          style={{ backgroundColor: `var(${colorVar})` }}
          aria-hidden="true"
        />
      )}
      <span className={size === "sm" ? "text-xs" : "text-sm"}>{label}</span>
    </span>
  );
}