"use client";

import { Team } from "@/lib/types";
import { TLA_TO_ISO2 } from "@/lib/flags";

// Zeigt die Flagge eines Teams aus lokalem circle-flags-Bestand.
// Fallback: kein Rendering bei fehlendem Team/Code (kein Broken-Image).
export default function Flag({
  team, size = 22,
}: { team?: Team; size?: number }) {
  const style = { width: size, height: size } as const;

  const iso2 = team?.code ? TLA_TO_ISO2[team.code.toUpperCase()] : undefined;
  if (iso2) {
    return (
      <img
        src={`/flags/${iso2}.svg`}
        alt={team!.code || team!.localisedName || team!.name}
        className="flag"
        style={style}
        loading="lazy"
      />
    );
  }
  // Kein Team / kein Code: nichts rendern (kein Broken-Image)
  return null;
}