{
  "name": "deal-banner",
  "title": "DealBanner",
  "description": "Displays active deals and promotions.",
  "type": "component",
  "registryDependencies": [
    "price",
    "cn"
  ],
  "files": [
    {
      "path": "deal-banner.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { Deal } from \"@cimplify/sdk\";\nimport { useDeals } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface DealBannerClassNames {\n  root?: string;\n  item?: string;\n  description?: string;\n  value?: string;\n  badge?: string;\n  empty?: string;\n}\n\nexport interface DealBannerProps {\n  /** Override deals (skips useDeals fetch). For SSR, pass pre-fetched deals. */\n  deals?: Deal[];\n  /** Location ID for location-specific deals. */\n  locationId?: string;\n  /** Called when a deal is clicked. */\n  onDealClick?: (deal: Deal) => void;\n  /** Custom deal card renderer. */\n  renderDeal?: (deal: Deal) => React.ReactNode;\n  /** Maximum deals to show. Default: all. */\n  limit?: number;\n  className?: string;\n  classNames?: DealBannerClassNames;\n}\n\nfunction formatBenefitLabel(deal: Deal): string {\n  switch (deal.benefit_type) {\n    case \"percentage\":\n      return `${deal.value}% off`;\n    case \"fixed\":\n      return `Save`;\n    case \"free_item\":\n      return \"Free item\";\n    case \"buy_x_get_y_free\":\n      return `Buy ${deal.buy_quantity ?? \"\"} get ${deal.get_quantity ?? 1} free`;\n    case \"points\":\n      return `Earn ${deal.value} points`;\n    default:\n      return \"Special offer\";\n  }\n}\n\n/**\n * DealBanner — displays active deals/promotions.\n *\n * Renders as a horizontal scrollable strip or grid of deal cards.\n */\nexport function DealBanner({\n  deals: dealsProp,\n  locationId,\n  onDealClick,\n  renderDeal,\n  limit,\n  className,\n  classNames,\n}: DealBannerProps): React.ReactElement | null {\n  const { deals: fetched, isLoading } = useDeals({\n    locationId,\n    enabled: dealsProp === undefined,\n  });\n\n  const allDeals = dealsProp ?? fetched;\n  const deals = limit ? allDeals.slice(0, limit) : allDeals;\n\n  if (isLoading && deals.length === 0) {\n    return (\n      <div\n        data-cimplify-deal-banner\n        aria-busy=\"true\"\n        className={cn(className, classNames?.root)}\n      />\n    );\n  }\n\n  if (deals.length === 0) {\n    return null;\n  }\n\n  return (\n    <div data-cimplify-deal-banner className={cn(className, classNames?.root)}>\n      {deals.map((deal) => (\n        <button\n          key={deal.id}\n          type=\"button\"\n          onClick={() => onDealClick?.(deal)}\n          data-cimplify-deal-item\n          data-benefit-type={deal.benefit_type}\n          className={classNames?.item}\n        >\n          {renderDeal ? (\n            renderDeal(deal)\n          ) : (\n            <>\n              <span data-cimplify-deal-badge className={classNames?.badge}>\n                {formatBenefitLabel(deal)}\n              </span>\n              <span data-cimplify-deal-description className={classNames?.description}>\n                {deal.description}\n              </span>\n              {deal.benefit_type === \"fixed\" && (\n                <span data-cimplify-deal-value className={classNames?.value}>\n                  <Price amount={deal.value} />\n                </span>\n              )}\n              {deal.min_order_value && (\n                <span data-cimplify-deal-minimum>\n                  Min. order <Price amount={deal.min_order_value} />\n                </span>\n              )}\n            </>\n          )}\n        </button>\n      ))}\n    </div>\n  );\n}\n"
    }
  ]
}