{
  "name": "product-card-05-block",
  "type": "registry:block",
  "dependencies": [],
  "registryDependencies": [
    "button",
    "https://ui.stackzero.co/r/image-viewer-basic.json",
    "https://ui.stackzero.co/r/price-format-sale.json"
  ],
  "files": [
    {
      "type": "registry:block",
      "content": "\"use client\";\n\nimport ImageViewer from \"@/components/commerce-ui/image-viewer-basic\";\nimport PriceFormatSale from \"@/components/commerce-ui/price-format-sale\";\nimport { Button } from \"@/components/ui/button\";\n\nconst DEFAULT_IMAGE_URL =\n  \"https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/shoes-02.jpg\";\n\ninterface ProductCard_05Props {\n  imageUrl?: string;\n  promoText?: string;\n  productName?: string;\n  description?: string;\n  originalPrice?: number;\n  salePrice?: number;\n  discountPercentage?: number;\n  onAddToCart?: () => void;\n  onBuyNow?: () => void;\n  isBestseller?: boolean;\n  currencyPrefix?: string;\n}\n\nfunction ProductCard_05({\n  currencyPrefix = \"$\",\n  description = \"Lightweight, responsive running shoes with breathable mesh and enhanced cushioning for maximum comfort.\",\n  discountPercentage = 33,\n  imageUrl = DEFAULT_IMAGE_URL,\n  isBestseller = true,\n  onAddToCart = () => {},\n  onBuyNow = () => {},\n  originalPrice = 150,\n  productName = \"AeroStride Performance Runner\",\n  promoText = \"FLASH SALE\",\n  salePrice = 99.95,\n}: ProductCard_05Props = {}) {\n  return (\n    <div className=\"group relative flex w-[330px] flex-col overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm transition-all duration-300 hover:shadow-lg dark:border-gray-800 dark:bg-gray-900\">\n      {/* Sale tag */}\n      {promoText && (\n        <div className=\"absolute top-5 left-0 z-10\">\n          <div className=\"relative overflow-hidden\">\n            <div className=\"flex h-9 items-center bg-gradient-to-r from-rose-600 to-red-500 px-4 py-1.5 shadow-lg\">\n              <span className=\"animate-pulse text-sm font-bold tracking-wider text-white\">\n                {promoText}\n              </span>\n              <div className=\"ml-2 flex items-center justify-center rounded-full bg-white px-1.5 py-0.5 text-xs font-bold text-rose-600\">\n                {discountPercentage}%\n              </div>\n            </div>\n            <div className=\"absolute top-0 -right-4 h-0 w-0 border-t-9 border-r-8 border-b-8 border-l-0 border-t-red-500 border-r-transparent border-b-transparent\"></div>\n          </div>\n        </div>\n      )}\n\n      {/* Bestseller badge */}\n      {isBestseller && (\n        <div className=\"absolute top-3 right-3 z-10 overflow-hidden rounded-full bg-amber-500 px-3 py-0.5 text-xs font-bold text-white shadow-md\">\n          BESTSELLER\n        </div>\n      )}\n\n      {/* Image container with gradient background */}\n      <div className=\"relative overflow-hidden bg-gradient-to-br from-slate-50 via-rose-50 to-slate-50 p-6 dark:from-gray-900 dark:via-rose-950/30 dark:to-gray-900\">\n        {/* Background blur effect */}\n        <div className=\"absolute -bottom-8 left-1/2 h-40 w-40 -translate-x-1/2 transform rounded-full bg-rose-400/20 blur-3xl\"></div>\n        <div className=\"transition-transform duration-500 group-hover:scale-105 group-hover:rotate-2\">\n          <ImageViewer\n            imageUrl={imageUrl}\n            classNameThumbnailViewer=\"rounded-lg object-contain h-[200px] mx-auto drop-shadow-lg\"\n          />\n        </div>\n      </div>\n\n      {/* Product details */}\n      <div className=\"flex flex-1 flex-col gap-3 p-5\">\n        <div>\n          <h3 className=\"text-xl font-bold tracking-tight text-gray-900 dark:text-gray-100\">\n            {productName}\n          </h3>\n          <p className=\"mt-1 line-clamp-2 text-sm text-gray-600 dark:text-gray-400\">\n            {description}\n          </p>\n        </div>\n\n        {/* Price */}\n        <div className=\"my-2 rounded-lg bg-rose-50 p-3 dark:bg-rose-900/20\">\n          <PriceFormatSale\n            prefix={currencyPrefix}\n            originalPrice={originalPrice}\n            salePrice={salePrice}\n            showSavePercentage\n            className=\"text-base font-medium text-gray-600 line-through dark:text-gray-400\"\n            classNameSalePrice=\"text-2xl font-extrabold text-rose-600 dark:text-rose-400\"\n            classNameSalePercentage=\"ml-2 inline-flex items-center justify-center rounded-md bg-rose-100 px-2 py-0.5 text-xs font-semibold text-rose-700 dark:bg-rose-800/40 dark:text-rose-300\"\n          />\n          <div className=\"mt-1 flex items-center\">\n            <svg\n              className=\"mr-1 h-4 w-4 text-amber-500\"\n              fill=\"currentColor\"\n              viewBox=\"0 0 20 20\"\n            >\n              <path\n                fillRule=\"evenodd\"\n                d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z\"\n                clipRule=\"evenodd\"\n              />\n            </svg>\n            <span className=\"text-xs font-medium text-gray-700 dark:text-gray-300\">\n              Sale ends in 2 days\n            </span>\n          </div>\n        </div>\n\n        {/* Action buttons */}\n        <div className=\"mt-4 flex flex-col gap-3\">\n          <Button\n            variant=\"outline\"\n            onClick={onAddToCart}\n            className=\"w-full border-gray-300 bg-white text-gray-800 transition-all duration-200 hover:border-rose-500 hover:bg-rose-50 hover:text-rose-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:hover:border-rose-500 dark:hover:bg-gray-700\"\n          >\n            Add to cart\n          </Button>\n          <Button\n            onClick={onBuyNow}\n            className=\"w-full bg-gradient-to-r from-rose-600 to-red-600 text-white transition-all hover:from-rose-700 hover:to-red-700\"\n          >\n            Buy now\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default ProductCard_05;\nexport type { ProductCard_05Props };\n",
      "path": "/components/commerce-ui/blocks/product-card/product-card-05.tsx",
      "target": "components/commerce-ui/product-card-05.tsx"
    }
  ]
}