"use client";

import { useMemo } from "react";
import { getLocalizedCountryName } from "../lib/localization";

interface CountryDisplayProps {
  countryCode: string | null | undefined;
  className?: string;
}

/**
 * Component to display a country name from its ISO 3166-1 alpha-2 code
 * Uses Intl.DisplayNames API when available, falls back to the code
 */
export default function CountryDisplay({
  countryCode,
  className,
}: CountryDisplayProps) {
  // Compute directly - Intl.DisplayNames is synchronous
  const countryName = useMemo(
    () => (countryCode ? getLocalizedCountryName(countryCode) : "Unknown"),
    [countryCode]
  );

  return <span className={className}>{countryName}</span>;
}