{
  "name": "currency-selector",
  "title": "CurrencySelector",
  "description": "Multi-currency switcher backed by the FX provider — locks display currency and quote ID.",
  "type": "component",
  "registryDependencies": [
    "cn"
  ],
  "files": [
    {
      "path": "currency-selector.tsx",
      "content": "\"use client\";\n\nimport React, { useState, useEffect, useRef } from \"react\";\nimport type { CurrencyCode } from \"@cimplify/sdk\";\nimport type { CimplifyError } from \"@cimplify/sdk\";\nimport type { FxRateResponse } from \"../types/fx\";\nimport { useOptionalCimplifyClient } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface CurrencySelectorClassNames {\n  root?: string;\n  option?: string;\n  activeOption?: string;\n  rate?: string;\n  label?: string;\n  loading?: string;\n}\n\nexport interface CurrencySelectorProps {\n  /** Available currencies to display. */\n  currencies: CurrencyCode[];\n  /** Currently selected currency. */\n  currentCurrency?: CurrencyCode;\n  /** Called when a currency is selected. */\n  onCurrencyChange?: (currency: CurrencyCode) => void;\n  /** Show the exchange rate next to each currency. Requires `baseCurrency`. */\n  showRate?: boolean;\n  /** Base currency used for rate display. */\n  baseCurrency?: CurrencyCode;\n  /** Custom currency option renderer. */\n  renderCurrency?: (\n    currency: CurrencyCode,\n    isActive: boolean,\n    rate: FxRateResponse | null,\n  ) => React.ReactNode;\n  className?: string;\n  classNames?: CurrencySelectorClassNames;\n}\n\n/**\n * CurrencySelector — currency switcher for international customers.\n *\n * Renders selectable currency options with optional exchange rate display.\n * Returns `null` when there is only one currency (no selector needed).\n */\nexport function CurrencySelector({\n  currencies,\n  currentCurrency,\n  onCurrencyChange,\n  showRate = false,\n  baseCurrency,\n  renderCurrency,\n  className,\n  classNames,\n}: CurrencySelectorProps): React.ReactElement | null {\n  const context = useOptionalCimplifyClient();\n  const client = context?.client ?? null;\n\n  const [rates, setRates] = useState<Record<string, FxRateResponse>>({});\n  const [isLoadingRates, setIsLoadingRates] = useState(false);\n  const requestIdRef = useRef(0);\n\n  useEffect(() => {\n    if (!showRate || !baseCurrency || !client) return;\n\n    const targets = currencies.filter((c) => c !== baseCurrency);\n    if (targets.length === 0) return;\n\n    const nextRequestId = ++requestIdRef.current;\n    setIsLoadingRates(true);\n\n    void (async () => {\n      const fetched: Record<string, FxRateResponse> = {};\n\n      await Promise.all(\n        targets.map(async (currency) => {\n          const res = await client.fx.getRate(baseCurrency, currency);\n          if (res.ok) {\n            fetched[currency] = res.value;\n          }\n        }),\n      );\n\n      if (nextRequestId !== requestIdRef.current) return;\n\n      setRates(fetched);\n      setIsLoadingRates(false);\n    })();\n  }, [client, showRate, baseCurrency, currencies]);\n\n  if (currencies.length <= 1) {\n    return null;\n  }\n\n  return (\n    <div data-cimplify-currency-selector className={cn(className, classNames?.root)}>\n      {currencies.map((currency) => {\n        const isActive = currentCurrency === currency;\n        const rate = rates[currency] ?? null;\n\n        return (\n          <button\n            key={currency}\n            type=\"button\"\n            onClick={() => onCurrencyChange?.(currency)}\n            data-cimplify-currency-option\n            data-active={isActive || undefined}\n            aria-pressed={isActive}\n            className={cn(\n              classNames?.option,\n              isActive && classNames?.activeOption,\n            )}\n          >\n            {renderCurrency ? (\n              renderCurrency(currency, isActive, rate)\n            ) : (\n              <>\n                <span data-cimplify-currency-label className={classNames?.label}>\n                  {currency}\n                </span>\n                {showRate && baseCurrency && currency !== baseCurrency && (\n                  <span data-cimplify-currency-rate className={classNames?.rate}>\n                    {isLoadingRates\n                      ? \"...\"\n                      : rate\n                        ? `1 ${baseCurrency} = ${Number(rate.rate).toFixed(4)} ${currency}`\n                        : null}\n                  </span>\n                )}\n              </>\n            )}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"
    }
  ]
}