{
  "name": "wholesale-product-card",
  "title": "WholesaleProductCard",
  "description": "B2B product card with price range, MOQ badge, and stock count.",
  "type": "component",
  "registryDependencies": [
    "price",
    "price-range",
    "cn"
  ],
  "files": [
    {
      "path": "cards/wholesale-product-card.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { CardLayoutProps } from \"@cimplify/sdk/react\";\nimport { CardShell, CardImage, QuickAddButton } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { PriceRange } from \"@cimplify/sdk/react\";\nimport { getProductCurrency } from \"@cimplify/sdk\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport function WholesaleProductCard({\n  product,\n  onQuickAdd,\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 hasTiers = product.quantity_pricing && product.quantity_pricing.length > 1;\n  const status = product.inventory_status;\n\n  return (\n    <CardShell product={product} renderLink={renderLink} className={className}>\n      <CardImage src={image} alt={product.name} aspectRatio=\"square\" renderImage={renderImage}>\n        {/* MOQ badge */}\n        {product.min_order_quantity != null && product.min_order_quantity > 1 && (\n          <span className=\"absolute top-3 left-3 text-[11px] font-semibold tracking-wide bg-zinc-800 text-white px-2 py-0.5 rounded-md\">\n            MOQ: {product.min_order_quantity}\n          </span>\n        )}\n\n        <QuickAddButton\n          onClick={() => onQuickAdd?.(product)}\n          className=\"absolute bottom-3 right-3\"\n        />\n      </CardImage>\n\n      <div className=\"p-3.5\">\n        {/* SKU */}\n        {product.sku && (\n          <p className=\"text-[10px] text-muted-foreground font-mono\">\n            {product.sku}\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 range or single */}\n        <div className=\"mt-2\">\n          {hasTiers ? (\n            <PriceRange product={product} className=\"text-sm font-bold\" />\n          ) : (\n            <Price amount={product.default_price} currency={currency} className=\"text-sm font-bold\" />\n          )}\n        </div>\n\n        {/* Stock */}\n        {status && (\n          <div className=\"flex items-center gap-1.5 mt-2\">\n            <span className={cn(\n              \"w-[7px] h-[7px] rounded-full shrink-0\",\n              status.in_stock\n                ? status.low_stock ? \"bg-amber-500\" : \"bg-emerald-500\"\n                : \"bg-red-500\",\n            )} />\n            <span className={cn(\n              \"text-[10.5px] font-medium\",\n              status.in_stock\n                ? status.low_stock ? \"text-amber-600\" : \"text-emerald-600\"\n                : \"text-red-600\",\n            )}>\n              {!status.in_stock\n                ? \"Out of stock\"\n                : status.stock_level != null\n                  ? `${status.stock_level.toLocaleString()} in stock`\n                  : \"In stock\"\n              }\n            </span>\n          </div>\n        )}\n      </div>\n    </CardShell>\n  );\n}\n"
    }
  ]
}