{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "price-selector",
  "type": "registry:block",
  "title": "Price selector",
  "description": "Hosted checkout billing cycle selector for the dark product panel.",
  "files": [
    {
      "path": "components/lomi-ui/price-selector.tsx",
      "target": "components/lomi-ui/price-selector.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport * as React from 'react';\n\nexport interface PriceOption {\n  price_id: string;\n  amount: number;\n  billing_interval?: string | null;\n  is_active?: boolean;\n  is_default?: boolean;\n}\n\nexport interface PriceSelectorProps {\n  prices: PriceOption[];\n  selectedPriceId: string | null;\n  onPriceSelect: (priceId: string) => void;\n  currencyCode?: string;\n  embedded?: boolean;\n  /** Matches checkout.billing_cycle.choose_plan */\n  label?: string;\n  /** Matches checkout.billing_cycle.save */\n  saveLabel?: string;\n  className?: string;\n}\n\nconst INTERVAL_LABELS: Record<string, string> = {\n  day: 'day',\n  week: 'week',\n  'bi-weekly': 'bi-weekly',\n  month: 'month',\n  monthly: 'month',\n  'bi-monthly': 'bi-monthly',\n  quarterly: 'quarter',\n  'semi-annual': 'semi-annual',\n  year: 'year',\n  yearly: 'year',\n  lifetime: 'lifetime',\n  unit: 'unit',\n};\n\nfunction cn(...classes: Array<string | false | null | undefined>) {\n  return classes.filter(Boolean).join(' ');\n}\n\nfunction formatCurrency(amount: number, currency: string) {\n  const locale = currency === 'XOF' ? 'fr-FR' : undefined;\n  const formattedAmount = amount.toLocaleString(locale, {\n    minimumFractionDigits: currency === 'USD' ? 2 : 0,\n    maximumFractionDigits: currency === 'USD' ? 2 : 0,\n  });\n  const displayCurrency = currency === 'XOF' ? 'F CFA' : currency;\n  return `${formattedAmount} ${displayCurrency}`;\n}\n\nfunction formatBillingIntervalLabel(interval: string | null | undefined) {\n  if (!interval) return 'month';\n  return INTERVAL_LABELS[interval] ?? interval;\n}\n\nexport function PriceSelector({\n  prices,\n  selectedPriceId,\n  onPriceSelect,\n  currencyCode = 'XOF',\n  embedded = false,\n  label = 'Choose your billing cycle',\n  saveLabel = 'Save',\n  className,\n}: PriceSelectorProps) {\n  const activePrices = prices.filter((price) => price.is_active !== false);\n\n  if (activePrices.length <= 1) {\n    return null;\n  }\n\n  const defaultPrice = activePrices.find((price) => price.is_default);\n  const monthlyPrice = activePrices.find(\n    (price) =>\n      price.billing_interval === 'month' ||\n      price.billing_interval === 'monthly',\n  );\n\n  const calculateSavings = (price: PriceOption) => {\n    if (defaultPrice && defaultPrice.price_id !== price.price_id) {\n      const savingsPercent = Math.round(\n        ((defaultPrice.amount - price.amount) / defaultPrice.amount) * 100,\n      );\n      const savingsAmount = defaultPrice.amount - price.amount;\n\n      if (savingsPercent > 0) {\n        return { percent: savingsPercent, amount: savingsAmount };\n      }\n    }\n\n    const isAnnualLike =\n      price.billing_interval === 'year' || price.billing_interval === 'yearly';\n    if (\n      monthlyPrice &&\n      isAnnualLike &&\n      monthlyPrice.price_id !== price.price_id\n    ) {\n      const annualizedMonthly = monthlyPrice.amount * 12;\n      const savingsAmount = annualizedMonthly - price.amount;\n      if (savingsAmount > 0) {\n        return {\n          percent: Math.round((savingsAmount / annualizedMonthly) * 100),\n          amount: savingsAmount,\n        };\n      }\n    }\n\n    return null;\n  };\n\n  return (\n    <div className={cn('w-full space-y-2', !embedded && 'mb-4', className)}>\n      <label className=\"block text-sm font-normal text-gray-400\">{label}</label>\n\n      <div className=\"space-y-1.5\">\n        {activePrices.map((price) => {\n          const isSelected = price.price_id === selectedPriceId;\n          const savings = calculateSavings(price);\n\n          return (\n            <button\n              key={price.price_id}\n              type=\"button\"\n              data-selected={isSelected ? 'true' : 'false'}\n              onClick={() => onPriceSelect(price.price_id)}\n              className={cn(\n                'price-selector-option flex h-10 w-full items-center gap-2.5 rounded-sm bg-transparent px-3 text-left transition-colors duration-150 outline-none',\n                isSelected\n                  ? 'price-selector-option-selected border border-[#56A5F9]'\n                  : 'border border-transparent',\n              )}\n            >\n              <div\n                className={cn(\n                  'flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded-full border',\n                  isSelected ? 'border-[#56A5F9]' : 'border-gray-600',\n                )}\n              >\n                {isSelected ? (\n                  <div className=\"h-1.5 w-1.5 rounded-full bg-[#56A5F9]\" />\n                ) : null}\n              </div>\n\n              <div className=\"flex min-w-0 flex-1 items-center gap-1.5 text-sm\">\n                <span className=\"font-medium text-gray-200\">\n                  {formatCurrency(price.amount, currencyCode)}\n                </span>\n                <span className=\"text-gray-400\">\n                  / {formatBillingIntervalLabel(price.billing_interval)}\n                </span>\n                {savings ? (\n                  <span className=\"ml-auto shrink-0 text-xs text-green-400\">\n                    {saveLabel} {savings.percent}%\n                  </span>\n                ) : null}\n              </div>\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"
    },
    {
      "path": "components/lomi-ui/demo/price-selector-demo.tsx",
      "target": "components/lomi-ui/demo/price-selector-demo.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { LomiUiPreview } from '@/components/preview/lomi-ui-preview';\nimport { PriceSelector } from '@/components/lomi-ui/price-selector';\n\nexport function PriceSelectorDemo() {\n  const [selectedPriceId, setSelectedPriceId] = React.useState('monthly');\n\n  return (\n    <LomiUiPreview variant=\"panel\" innerClassName=\"mx-auto max-w-md\">\n      <PriceSelector\n        selectedPriceId={selectedPriceId}\n        onPriceSelect={setSelectedPriceId}\n        currencyCode=\"XOF\"\n        prices={[\n          {\n            price_id: 'monthly',\n            amount: 25000,\n            billing_interval: 'monthly',\n            is_default: true,\n          },\n          {\n            price_id: 'yearly',\n            amount: 250000,\n            billing_interval: 'yearly',\n          },\n        ]}\n      />\n    </LomiUiPreview>\n  );\n}\n"
    }
  ]
}