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

// 모든 경기에 일반화된 국기 렌더.
// 글로벌 축구 축전 출전 48개국 SVG 자산(/assets/flags/{fifa코드}.svg, 예: kor.svg)을 사용하고,
// 자산이 없는 코드는 이모지 폴백(컨테이너 높이에 비례, 안 잘림).
export default function TeamFlag({
  team,
  className = "",
}: {
  team: Team;
  className?: string;
}) {
  const [failed, setFailed] = useState(false);

  if (!failed && team.code) {
    return (
      <img
        src={`/assets/flags/${team.code.toLowerCase()}.svg`}
        alt={team.name}
        onError={() => setFailed(true)}
        className={`flag-img object-cover border border-[var(--line-d)] ${className}`}
      />
    );
  }

  // 폴백 — 이모지 국기. 컨테이너 높이(cqh) 기준으로 크기를 잡아 잘림/찌그러짐 방지.
  return (
    <span
      className={`grid place-items-center overflow-hidden border border-[var(--line-d)] bg-white/[0.06] ${className}`}
      style={{ containerType: "size" }}
      aria-label={team.name}
    >
      <span className="leading-none" style={{ fontSize: "92cqh" }}>
        {team.flag}
      </span>
    </span>
  );
}
