{
  "name": "product-card-09-block",
  "type": "registry:block",
  "dependencies": [],
  "registryDependencies": [
    "button",
    "https://ui.stackzero.co/r/image-viewer-basic.json",
    "https://ui.stackzero.co/r/price-format-basic.json",
    "https://ui.stackzero.co/r/star-rating-fractions.json"
  ],
  "files": [
    {
      "type": "registry:block",
      "content": "\"use client\";\n\nimport ImageViewer from \"@/components/commerce-ui/image-viewer-basic\";\nimport PriceFormat from \"@/components/commerce-ui/price-format-basic\";\nimport StarRating_Fractions from \"@/components/commerce-ui/star-rating-fractions\";\nimport { Button } from \"@/components/ui/button\";\n\nconst DEFAULT_IMAGE_URL =\n  \"https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/coffee-machine-02.jpg\";\n\ninterface Benefit {\n  icon: React.ReactNode;\n  title: string;\n  description: string;\n}\n\ninterface ProductCard_09Props {\n  imageUrl?: string;\n  productName?: string;\n  description?: string;\n  price?: number;\n  rating?: number;\n  reviewCount?: number;\n  warranty?: string;\n  benefits?: Benefit[];\n  onAddToCart?: () => void;\n  onBuyNow?: () => void;\n  currencyPrefix?: string;\n}\n\nfunction ProductCard_09({\n  description = \"Premium espresso machine with 15-bar pressure, built-in grinder and milk frother for café-quality coffee at home\",\n  benefits = [\n    {\n      description: \"Ready in under 30 seconds\",\n      icon: (\n        <svg\n          className=\"h-6 w-6\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          viewBox=\"0 0 24 24\"\n        >\n          <path\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth={2}\n            d=\"M13 10V3L4 14h7v7l9-11h-7z\"\n          />\n        </svg>\n      ),\n      title: \"Fast Brewing\",\n    },\n    {\n      description: \"Self-cleaning function\",\n      icon: (\n        <svg\n          className=\"h-6 w-6\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          viewBox=\"0 0 24 24\"\n        >\n          <path\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth={2}\n            d=\"M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z\"\n          />\n        </svg>\n      ),\n      title: \"Easy Cleaning\",\n    },\n    {\n      description: \"Multiple brewing options\",\n      icon: (\n        <svg\n          className=\"h-6 w-6\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          viewBox=\"0 0 24 24\"\n        >\n          <path\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth={2}\n            d=\"M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z\"\n          />\n        </svg>\n      ),\n      title: \"Customizable\",\n    },\n  ],\n  currencyPrefix = \"$\",\n  imageUrl = DEFAULT_IMAGE_URL,\n  onAddToCart = () => {},\n  onBuyNow = () => {},\n  price = 399.99,\n  productName = \"BrewMaster Pro Coffee Machine\",\n  rating = 4.8,\n  reviewCount = 256,\n  warranty = \"2 Year\",\n}: ProductCard_09Props = {}) {\n  return (\n    <div className=\"flex flex-col\">\n      {/* Main product card */}\n      <div className=\"group border-brown-200 dark:border-brown-800 relative flex flex-col overflow-hidden rounded-xl border bg-white shadow-sm transition-all duration-300 hover:shadow-md sm:h-[220px] sm:flex-row dark:bg-gray-900\">\n        <div className=\"absolute inset-0 overflow-hidden\">\n          <div className=\"absolute -top-8 -left-8 h-32 w-32 animate-pulse rounded-full bg-amber-700/20\"></div>\n          <div className=\"absolute right-0 bottom-0 h-40 w-40 rounded-full bg-amber-900/10 blur-md\"></div>\n          <div className=\"absolute bottom-12 left-1/3 h-24 w-24 rounded-full bg-amber-600/10 blur-sm\"></div>\n          <div className=\"absolute inset-0 bg-[radial-gradient(circle_at_20%_70%,rgba(146,64,14,0.08),transparent)]\"></div>\n        </div>\n\n        {/* Image section */}\n        <div className=\"to-brown-50 relative h-52 w-full bg-gradient-to-br from-amber-50 via-amber-100/50 p-6 sm:h-full sm:w-2/5 dark:from-gray-900 dark:via-amber-950/10 dark:to-gray-900\">\n          {/* Premium badge */}\n          <div className=\"absolute top-3 left-3 z-20 flex items-center justify-center\">\n            <div className=\"rounded-md bg-gradient-to-r from-amber-700 to-amber-900 px-3 py-1 text-xs font-bold tracking-wider text-amber-50 uppercase shadow-md\">\n              Barista Choice\n            </div>\n          </div>\n\n          {/* Coffee-themed decoration */}\n          <div className=\"absolute inset-0 z-10\">\n            {/* Steam-like swirls */}\n            <div className=\"absolute top-1/3 left-1/2 h-12 w-8 -translate-x-1/2 rounded-full border-t border-l border-amber-700/20 opacity-30\"></div>\n            <div className=\"absolute top-1/4 left-1/3 h-8 w-12 -translate-x-1/2 rounded-full border-t border-r border-amber-700/20 opacity-30\"></div>\n          </div>\n\n          {/* Image with hover effect */}\n          <div className=\"relative z-10 flex h-full items-center justify-center\">\n            <div className=\"transition-all duration-500 group-hover:scale-[1.05]\">\n              <ImageViewer\n                imageUrl={imageUrl}\n                classNameThumbnailViewer=\"rounded-lg h-full object-contain drop-shadow-lg max-h-[180px]\"\n              />\n            </div>\n          </div>\n        </div>\n\n        {/* Content section */}\n        <div className=\"relative z-10 flex flex-1 flex-col justify-between p-5\">\n          <div>\n            {/* Product name and description */}\n            <div className=\"mb-3\">\n              <div className=\"mb-1 flex items-center justify-between\">\n                <h3 className=\"text-xl font-bold text-amber-900 dark:text-amber-100\">\n                  {productName}\n                </h3>\n                <PriceFormat\n                  prefix={currencyPrefix}\n                  value={price}\n                  className=\"text-xl font-bold text-amber-800 dark:text-amber-300\"\n                />\n              </div>\n\n              {/* Rating section */}\n              <div className=\"mb-2 flex items-center\">\n                <StarRating_Fractions\n                  value={rating}\n                  readOnly={true}\n                  iconSize={16}\n                  color=\"#92400E\"\n                  className=\"flex-shrink-0\"\n                />\n                <span className=\"ml-2 text-sm text-amber-700 dark:text-amber-400\">\n                  ({reviewCount} reviews)\n                </span>\n              </div>\n\n              <p className=\"line-clamp-2 text-sm text-amber-800/80 dark:text-amber-200/80\">\n                {description}\n              </p>\n            </div>\n          </div>\n\n          {/* Bottom section with warranty and buttons */}\n          <div className=\"flex flex-col-reverse gap-3 sm:flex-row sm:items-end sm:justify-between sm:gap-0\">\n            <div>\n              <p className=\"flex items-center text-xs font-medium text-amber-700 dark:text-amber-300\">\n                <svg\n                  className=\"mr-1 h-4 w-4\"\n                  fill=\"currentColor\"\n                  viewBox=\"0 0 20 20\"\n                >\n                  <path\n                    fillRule=\"evenodd\"\n                    d=\"M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\"\n                    clipRule=\"evenodd\"\n                  />\n                </svg>\n                {warranty} Warranty Included\n              </p>\n            </div>\n\n            {/* Action buttons */}\n            <div className=\"flex space-x-2\">\n              <Button\n                variant=\"outline\"\n                onClick={onAddToCart}\n                className=\"border-amber-300 bg-white text-amber-800 hover:border-amber-500 hover:bg-amber-50 hover:text-amber-900 dark:border-amber-700/50 dark:bg-gray-800 dark:text-amber-300 dark:hover:border-amber-600\"\n              >\n                Add to cart\n              </Button>\n              <Button\n                onClick={onBuyNow}\n                className=\"bg-gradient-to-r from-amber-700 to-amber-900 text-white hover:from-amber-800 hover:to-amber-950\"\n              >\n                Buy now\n              </Button>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      {/* Horizontal benefits list */}\n      <div className=\"mt-4 grid grid-cols-1 gap-4 md:grid-cols-3\">\n        {benefits.map((benefit, index) => (\n          <div\n            key={index}\n            className=\"relative flex items-center gap-4 overflow-hidden rounded-lg border border-amber-200 bg-gradient-to-br from-white to-amber-50 p-4 shadow-sm transition-all hover:border-amber-300 hover:shadow-md dark:border-amber-900/50 dark:from-gray-900 dark:to-amber-950/20\"\n          >\n            {/* Decorations */}\n            <div className=\"absolute right-0 bottom-0 h-16 w-16 rounded-tl-full bg-amber-800/5\"></div>\n\n            <div className=\"flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-amber-100 to-amber-200 text-amber-800 dark:from-amber-900/40 dark:to-amber-800/40 dark:text-amber-300\">\n              {benefit.icon}\n            </div>\n            <div className=\"relative z-10\">\n              <h4 className=\"font-medium text-amber-900 dark:text-amber-100\">\n                {benefit.title}\n              </h4>\n              <p className=\"text-sm text-amber-700/80 dark:text-amber-300/80\">\n                {benefit.description}\n              </p>\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nexport default ProductCard_09;\nexport type { ProductCard_09Props, Benefit };\n",
      "path": "/components/commerce-ui/blocks/product-card/product-card-09.tsx",
      "target": "components/commerce-ui/product-card-09.tsx"
    }
  ]
}