CurrencyBadge

import * as React from "react";
import { cn } from "@/lib/ledger/cn";

/**
 * Flags are regional, not linguistic. Any currency without a clean
 * single-country mapping gets no flag rather than a wrong one.
 */
const FLAGS: Record<string, string> = {
  AUD: "🇦🇺",
  BRL: "🇧🇷",
  CAD: "🇨🇦",
  CHF: "🇨🇭",
  CZK: "🇨🇿",
  DKK: "🇩🇰",
  EUR: "🇪🇺",
  GBP: "🇬🇧",
  HKD: "🇭🇰",
  INR: "🇮🇳",
  JPY: "🇯🇵",
  KWD: "🇰🇼",
  MXN: "🇲🇽",
  NOK: "🇳🇴",
  NZD: "🇳🇿",
  PLN: "🇵🇱",
  SEK: "🇸🇪",
  SGD: "🇸🇬",
  USD: "🇺🇸",
  ZAR: "🇿🇦",
};

export interface CurrencyBadgeProps extends React.ComponentPropsWithoutRef<"span"> {
  currency: string;
  showFlag?: boolean;
  size?: "sm" | "md";
}

/** The code is always present; the flag is decoration. */
export const CurrencyBadge = React.forwardRef<HTMLSpanElement, CurrencyBadgeProps>(
  ({ className, currency, showFlag = true, size = "sm", ...props }, ref) => {
    const flag = showFlag ? FLAGS[currency] : undefined;
    return (
      <span
        className={cn(
          "inline-flex items-center gap-1.5 font-medium",
          size === "sm" ? "text-label" : "text-body",
          className,
        )}
        ref={ref}
        {...props}
      >
        {flag ? (
          <span aria-hidden="true" className="text-[1.1em] leading-none">
            {flag}
          </span>
        ) : null}
        <span className="reference-numeric">{currency}</span>
      </span>
    );
  },
);
CurrencyBadge.displayName = "CurrencyBadge";

export const CURRENCY_FLAGS = FLAGS;