"use client";

import { useState } from "react";
import { Team } from "@/lib/types";

// Zeigt die Flagge/das Wappen eines Teams. Fällt auf ein neutrales Rund
// zurück, wenn keine crest-URL vorliegt oder das Bild nicht geladen werden kann.
export default function Flag({
  team, size = 22,
}: { team?: Team; size?: number }) {
  const [imgFailed, setImgFailed] = useState(false);
  const style = { width: size, height: size } as const;

  if (team?.crest && !imgFailed) {
    return (
      <img
        src={team.crest}
        alt={team.code || team.localisedName || team.name}
        className="flag"
        style={style}
        loading="lazy"
        onError={() => setImgFailed(true)}
      />
    );
  }
  // Fallback: Kreis mit Ländercode
  return (
    <span className="flag flag-fallback" style={style} aria-hidden>
      {team?.code?.slice(0, 2) || "··"}
    </span>
  );
}