{
  "name": "food-product-card",
  "title": "FoodProductCard",
  "description": "Product card for food items with tags, badges, and quick-add.",
  "type": "component",
  "registryDependencies": [
    "price",
    "cn",
    "strip-html"
  ],
  "files": [
    {
      "path": "cards/food-product-card.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\nimport { stripHtmlToText } from \"@cimplify/sdk/react\";\nimport { PRODUCT_TYPE } from \"@cimplify/sdk\";\nimport type { CardLayoutProps } from \"@cimplify/sdk/react\";\nimport { CardShell, CardImage, QuickAddButton } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { getProductCurrency } from \"@cimplify/sdk\";\nimport { cn } from \"@cimplify/sdk/react\";\n\n\nexport function FoodProductCard({\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 tags = product.tags || [];\n  const isSignature = product.metadata?.is_signature === true;\n  const isNew = product.metadata?.is_new === true;\n  const isComposite = product.type === PRODUCT_TYPE.Composite;\n\n  return (\n    <CardShell product={product} renderLink={renderLink} className={className}>\n      <CardImage src={image} alt={product.name} aspectRatio=\"square\" renderImage={renderImage}>\n        {/* Badges */}\n        {isSignature && (\n          <span className=\"absolute top-3 left-3 inline-flex items-center gap-1 text-[11px] font-semibold tracking-wide bg-amber-50 text-amber-700 border border-amber-200/60 px-2 py-0.5 rounded-md\">\n            <svg className=\"w-3 h-3 opacity-70\" fill=\"currentColor\" viewBox=\"0 0 16 16\"><path d=\"M8 .75l1.85 4.95L15 6.2l-3.7 3.2 1.1 5.1L8 12.15 3.6 14.5l1.1-5.1L1 6.2l5.15-.5z\" /></svg>\n            Signature\n          </span>\n        )}\n        {isNew && !isSignature && (\n          <span className=\"absolute top-3 left-3 text-[11px] font-semibold tracking-wide bg-emerald-50 text-emerald-700 border border-emerald-200/60 px-2 py-0.5 rounded-md\">\n            New\n          </span>\n        )}\n        {isComposite && (\n          <span className=\"absolute top-3 left-3 text-[11px] font-semibold tracking-wide bg-violet-50 text-violet-700 border border-violet-200/60 px-2 py-0.5 rounded-md\">\n            Customizable\n          </span>\n        )}\n\n        {/* Quick add */}\n        <QuickAddButton\n          onClick={() => onQuickAdd?.(product)}\n          className=\"absolute bottom-3 right-3\"\n        />\n      </CardImage>\n\n      <div className=\"p-3.5\">\n        <h3 className=\"text-[14.5px] font-semibold text-foreground leading-snug tracking-tight truncate\">\n          {product.name}\n        </h3>\n        {product.description && (\n          <p className=\"text-[12.5px] text-muted-foreground mt-1 leading-relaxed line-clamp-2\">\n            {stripHtmlToText(product.description)}\n          </p>\n        )}\n        <div className=\"flex items-center justify-between mt-3\">\n          {isComposite ? (\n            <span className=\"text-sm font-bold\">From <Price amount={product.default_price} currency={currency} /></span>\n          ) : (\n            <Price amount={product.default_price} currency={currency} className=\"text-sm font-bold\" />\n          )}\n          {tags.length > 0 && (\n            <div className=\"flex gap-1\">\n              {tags.slice(0, 2).map((tag) => (\n                <span key={tag} className=\"text-[10px] font-medium text-muted-foreground px-1.5 py-0.5 bg-muted rounded\">\n                  {tag}\n                </span>\n              ))}\n            </div>\n          )}\n        </div>\n      </div>\n    </CardShell>\n  );\n}\n"
    }
  ]
}