{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkout-summary-card",
  "type": "registry:block",
  "title": "Checkout summary card",
  "description": "Dark hosted-checkout product summary panel from the left checkout column.",
  "files": [
    {
      "path": "components/lomi-ui/checkout-summary-card.tsx",
      "target": "components/lomi-ui/checkout-summary-card.tsx",
      "type": "registry:component",
      "content": "/* eslint-disable @next/next/no-img-element -- lomi. UI registry components are framework-portable copy-paste components. */\n\nimport * as React from 'react';\n\nexport interface CheckoutSummaryItem {\n  name: string;\n  quantity?: number;\n  amount: number;\n  unitAmount?: number;\n  imageUrl?: string;\n}\n\nexport interface CheckoutSummaryFee {\n  name: string;\n  amount: number;\n  label?: string;\n}\n\nexport interface CheckoutSummaryCardProps {\n  /** Product or payment link title shown above the price. */\n  title: string;\n  items?: CheckoutSummaryItem[];\n  subtotal: number;\n  fees?: number | CheckoutSummaryFee[];\n  discount?: number;\n  total: number;\n  currency: string;\n  description?: string;\n  productImageUrl?: string;\n  className?: string;\n}\n\nfunction cn(...classes: Array<string | false | null | undefined>) {\n  return classes.filter(Boolean).join(' ');\n}\n\nfunction formatAmount(amount: number) {\n  return new Intl.NumberFormat('fr-FR', {\n    maximumFractionDigits: 0,\n  }).format(amount);\n}\n\nfunction normalizeFees(\n  fees: number | CheckoutSummaryFee[] | undefined,\n): CheckoutSummaryFee[] {\n  if (!fees) return [];\n  if (typeof fees === 'number') {\n    return fees > 0 ? [{ name: 'Fees', amount: fees }] : [];\n  }\n  return fees.filter((fee) => fee.amount > 0);\n}\n\nexport function CheckoutSummaryCard({\n  title,\n  items = [],\n  subtotal,\n  fees,\n  discount = 0,\n  total,\n  currency,\n  description,\n  productImageUrl,\n  className,\n}: CheckoutSummaryCardProps) {\n  const feeRows = normalizeFees(fees);\n  const totalItems = items.reduce((sum, item) => sum + (item.quantity ?? 1), 0);\n  const showCart = items.length > 1;\n\n  return (\n    <aside\n      className={cn(\n        'w-full max-w-[488px] p-4 text-white select-none lg:p-8',\n        className,\n      )}\n      style={{ backgroundColor: '#121317' }}\n    >\n      {showCart ? (\n        <div className=\"mb-8 space-y-4\">\n          <div className=\"flex items-center justify-between border-b border-gray-800 pb-3\">\n            <h3 className=\"text-lg font-medium text-white\">Your Cart</h3>\n            <span className=\"text-sm text-gray-400\">\n              {totalItems} {totalItems === 1 ? 'item' : 'items'}\n            </span>\n          </div>\n          <div className=\"max-h-[300px] space-y-4 overflow-y-auto pr-2 scrollbar-thin\">\n            {items.map((item) => (\n              <div\n                key={item.name}\n                className=\"flex items-start gap-4 rounded-lg border border-gray-800 bg-gray-900/50 p-3 transition-colors hover:border-gray-700\"\n              >\n                <div className=\"h-16 w-16 shrink-0 overflow-hidden rounded-md bg-gray-800\">\n                  {item.imageUrl ? (\n                    <img\n                      src={item.imageUrl}\n                      alt={item.name}\n                      className=\"h-full w-full object-cover\"\n                    />\n                  ) : null}\n                </div>\n                <div className=\"min-w-0 flex-1\">\n                  <h4 className=\"truncate text-sm font-medium text-white\">\n                    {item.name}\n                  </h4>\n                  {item.unitAmount ? (\n                    <p className=\"mt-0.5 text-xs text-gray-400\">\n                      {formatAmount(item.unitAmount)} {currency} each\n                    </p>\n                  ) : null}\n                  <div className=\"mt-2 flex items-center justify-between\">\n                    <span className=\"text-sm text-gray-400\">\n                      Qty: {item.quantity ?? 1}\n                    </span>\n                    <div className=\"text-right\">\n                      <span className=\"text-sm font-medium text-white\">\n                        {formatAmount(item.amount)}\n                      </span>\n                      <span className=\"ml-1 text-sm text-gray-400\">\n                        {currency}\n                      </span>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            ))}\n          </div>\n          <div className=\"border-t border-gray-800 pt-4\">\n            <div className=\"flex items-center justify-between\">\n              <span className=\"text-gray-400\">Subtotal</span>\n              <div className=\"flex items-baseline gap-1\">\n                <span className=\"text-lg font-medium text-white\">\n                  {formatAmount(subtotal)}\n                </span>\n                <span className=\"text-gray-400\">{currency}</span>\n              </div>\n            </div>\n          </div>\n        </div>\n      ) : (\n        <div className=\"mb-12\">\n          <h2 className=\"mb-4 text-xl text-gray-300\">{title}</h2>\n          <div className=\"mb-4 flex items-baseline gap-2\">\n            <span className=\"text-4xl font-semibold\">\n              {formatAmount(total)}\n            </span>\n            <span className=\"text-4xl\">{currency}</span>\n          </div>\n          {(description || productImageUrl || items[0]?.imageUrl) && (\n            <div className=\"flex items-start gap-2 border-t border-gray-800 pt-4\">\n              {(productImageUrl || items[0]?.imageUrl) && (\n                <div className=\"h-12 w-12 shrink-0 overflow-hidden rounded-sm bg-gray-800\">\n                  <img\n                    src={productImageUrl ?? items[0]?.imageUrl}\n                    alt={items[0]?.name ?? title}\n                    className=\"h-full w-full object-cover\"\n                  />\n                </div>\n              )}\n              {description ? (\n                <div className=\"max-h-40 overflow-y-auto whitespace-pre-line text-sm text-gray-400\">\n                  {description}\n                </div>\n              ) : null}\n            </div>\n          )}\n        </div>\n      )}\n\n      {!showCart ? (\n        <div className=\"space-y-2\">\n          <div className=\"border-t border-gray-800 pt-4\">\n            <div className=\"flex items-baseline justify-between\">\n              <span className=\"text-gray-400\">Subtotal</span>\n              <div className=\"flex items-baseline gap-2\">\n                <span className=\"text-lg\">{formatAmount(subtotal)}</span>\n                <span className=\"text-lg text-gray-400\">{currency}</span>\n              </div>\n            </div>\n\n            {feeRows.map((fee) => (\n              <div\n                key={fee.name}\n                className=\"flex items-baseline justify-between pt-2\"\n              >\n                <div className=\"flex items-baseline gap-1.5\">\n                  <span className=\"text-gray-400\">{fee.name}</span>\n                  {fee.label ? (\n                    <span className=\"text-xs text-gray-500\">({fee.label})</span>\n                  ) : null}\n                </div>\n                <div className=\"flex items-baseline gap-2\">\n                  <span className=\"text-gray-400\">\n                    {formatAmount(fee.amount)}\n                  </span>\n                  <span className=\"text-gray-500\">{currency}</span>\n                </div>\n              </div>\n            ))}\n\n            {discount > 0 ? (\n              <div className=\"flex items-baseline justify-between pt-2\">\n                <span className=\"text-gray-400\">Discount</span>\n                <div className=\"flex items-baseline gap-2\">\n                  <span className=\"text-gray-400\">\n                    -{formatAmount(discount)}\n                  </span>\n                  <span className=\"text-gray-500\">{currency}</span>\n                </div>\n              </div>\n            ) : null}\n          </div>\n\n          <div className=\"border-t border-gray-800 pt-4\">\n            <div className=\"flex items-baseline justify-between\">\n              <span className=\"font-normal text-white\">Total due today</span>\n              <div className=\"flex items-baseline gap-2\">\n                <span className=\"text-lg font-normal\">\n                  {formatAmount(total)}\n                </span>\n                <span className=\"text-lg text-gray-400\">{currency}</span>\n              </div>\n            </div>\n          </div>\n        </div>\n      ) : null}\n    </aside>\n  );\n}\n"
    },
    {
      "path": "components/lomi-ui/demo/checkout-summary-card-demo.tsx",
      "target": "components/lomi-ui/demo/checkout-summary-card-demo.tsx",
      "type": "registry:component",
      "content": "import { LomiUiPreview } from '@/components/preview/lomi-ui-preview';\nimport { CheckoutSummaryCard } from '@/components/lomi-ui/checkout-summary-card';\n\nexport function CheckoutSummaryCardDemo() {\n  return (\n    <LomiUiPreview variant=\"panel\">\n      <CheckoutSummaryCard\n        title=\"Pay for Design workshop\"\n        currency=\"XOF\"\n        description=\"A full-day workshop covering product design fundamentals.\"\n        subtotal={12500}\n        fees={[{ name: 'Processing fee', amount: 250 }]}\n        discount={1000}\n        total={11750}\n      />\n    </LomiUiPreview>\n  );\n}\n"
    }
  ]
}