{
  "name": "retail-product-card",
  "title": "RetailProductCard",
  "description": "Product card for retail with color swatches, sale badge, wishlist, and sold-out overlay.",
  "type": "component",
  "registryDependencies": [
    "price",
    "cn"
  ],
  "files": [
    {
      "path": "cards/retail-product-card.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { Product, ProductWithDetails } from \"@cimplify/sdk\";\nimport type { CardLayoutProps } from \"@cimplify/sdk/react\";\nimport { CardShell, CardImage, WishlistButton, SoldOutOverlay, SaleBadge, LowStockBadge } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { parsePrice, isOnSale, getBasePrice, getDiscountPercentage, getProductCurrency } from \"@cimplify/sdk\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nfunction getColorSwatches(product: Product): string[] {\n  const variants = (product as ProductWithDetails).variants;\n  if (!variants || variants.length === 0) return [];\n\n  const seen = new Set<string>();\n  for (const v of variants) {\n    if (v.display_attributes) {\n      for (const attr of v.display_attributes) {\n        if (attr.axis_name.toLowerCase() === \"color\" && !seen.has(attr.value_name)) {\n          seen.add(attr.value_name);\n        }\n      }\n    }\n  }\n\n  return Array.from(seen).slice(0, 5);\n}\n\nexport function RetailProductCard({\n  product,\n  renderImage,\n  renderLink,\n  className,\n}: CardLayoutProps): React.ReactElement {\n  const image = product.image_url || product.images?.[0] || \"\";\n  const currency = getProductCurrency(product);\n  const outOfStock = product.inventory_status?.in_stock === false;\n  const onSale = isOnSale(product);\n  const swatches = getColorSwatches(product);\n\n  return (\n    <CardShell product={product} renderLink={renderLink} disabled={outOfStock} className={className}>\n      {outOfStock && <SoldOutOverlay />}\n\n      <CardImage src={image} alt={product.name} aspectRatio=\"3/4\" renderImage={renderImage}>\n        {/* Sale badge */}\n        {onSale && (\n          <div className=\"absolute top-3 left-3\">\n            <SaleBadge product={product} />\n          </div>\n        )}\n\n        {/* Wishlist */}\n        <WishlistButton className=\"absolute top-3 right-3\" />\n\n        {/* Low stock */}\n        {product.inventory_status?.low_stock && product.inventory_status?.stock_level && (\n          <span className=\"absolute bottom-3 left-3 text-[11px] font-semibold bg-amber-50 text-amber-700 border border-amber-200/60 px-2 py-0.5 rounded-md\">\n            Only {product.inventory_status.stock_level} left\n          </span>\n        )}\n      </CardImage>\n\n      <div className=\"p-3.5\">\n        {/* Brand */}\n        {product.vendor && (\n          <p className=\"text-[10px] font-semibold text-muted-foreground uppercase tracking-widest\">\n            {product.vendor}\n          </p>\n        )}\n\n        {/* Name */}\n        <h3 className=\"text-[14.5px] font-semibold text-foreground leading-snug tracking-tight mt-1 truncate\">\n          {product.name}\n        </h3>\n\n        {/* Price */}\n        <div className=\"flex items-center gap-2 mt-2\">\n          {product.sale ? (\n            <>\n              <Price amount={product.sale.price} currency={currency} className=\"text-sm font-bold\" />\n              <Price amount={product.sale.original} currency={currency} className=\"text-xs text-muted-foreground line-through\" />\n            </>\n          ) : (\n            <>\n              <Price amount={product.default_price} currency={currency} className=\"text-sm font-bold\" />\n              {onSale && (\n                <Price amount={getBasePrice(product)} currency={currency} className=\"text-xs text-muted-foreground line-through\" />\n              )}\n            </>\n          )}\n        </div>\n\n        {/* Color swatches */}\n        {swatches.length > 0 && (\n          <div className=\"flex gap-1.5 mt-2.5\">\n            {swatches.map((name) => (\n              <span\n                key={name}\n                title={name}\n                className=\"text-[9px] font-medium text-muted-foreground px-1.5 py-0.5 bg-muted rounded\"\n              >\n                {name}\n              </span>\n            ))}\n          </div>\n        )}\n      </div>\n    </CardShell>\n  );\n}\n"
    }
  ]
}