// src/components/ui/flag.tsx — drapeau pays unifié. Rend un SVG servi en
// statique (public/flags/{code}.svg), zéro SVG dans le bundle JS. Fallback
// neutre si le code est inconnu ou le fichier absent (onError).
"use client";

import { GlobeIcon } from "lucide-react";
import { useState } from "react";
import { cn } from "@/lib/utils";
// Logique pure isolée dans ./flag-src (testable sans charger React sous
// --conditions=react-server). Réexportée pour que les consommateurs gardent
// `import { flagSrc } from "@/components/ui/flag"`.
import { flagSrc } from "./flag-src";

export { flagSrc };

export function Flag({
  code,
  className,
  title,
}: {
  code: string | null | undefined;
  className?: string;
  title?: string;
}) {
  const src = flagSrc(code);
  const [failed, setFailed] = useState(false);
  if (!src || failed) {
    return (
      <GlobeIcon
        aria-label={title ?? undefined}
        className={cn("inline-block h-4 w-4 text-muted-foreground", className)}
      />
    );
  }
  return (
    // biome-ignore lint/performance/noImgElement: SVG statique servi à la demande, next/image inutile
    <img
      src={src}
      alt={title ?? ""}
      title={title}
      loading="lazy"
      onError={() => setFailed(true)}
      className={cn("inline-block h-4 w-auto rounded-[2px]", className)}
    />
  );
}