{
  "name": "product-card-10-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 PriceFormat_Sale 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/handcream-01.jpg\";\n\ninterface ProductCard_10Props {\n  imageUrl?: string;\n  newProduct?: boolean;\n  productName?: string;\n  description?: string;\n  price?: number;\n  originalPrice?: number;\n  availableStock?: number;\n  volume?: string;\n  skinType?: string;\n  benefits?: string[];\n  ingredients?: string[];\n  onAddToCart?: () => void;\n  onBuyNow?: () => void;\n  onLearnMore?: () => void;\n  currencyPrefix?: string;\n}\n\nfunction ProductCard_10({\n  availableStock = 42,\n  benefits = [\n    \"24h Hydration\",\n    \"Non-greasy formula\",\n    \"Repairs damaged skin\",\n    \"Dermatologist tested\",\n  ],\n  currencyPrefix = \"$\",\n  description = \"Ultra-hydrating hand cream formulated with shea butter, aloe vera, and vitamin E. Absorbs quickly for immediate relief of dry skin, leaving hands soft and nourished without greasy residue. Perfect for daily use and harsh weather protection.\",\n  imageUrl = DEFAULT_IMAGE_URL,\n  ingredients = [\"Shea Butter\", \"Aloe Vera\", \"Vitamin E\", \"Jojoba Oil\"],\n  newProduct = true,\n  onAddToCart = () => {},\n  onBuyNow = () => {},\n  onLearnMore = () => {},\n  originalPrice = 29.99,\n  price = 24.99,\n  productName = \"NatureSilk Intensive Hand Cream\",\n  skinType = \"All skin types\",\n  volume = \"75ml / 2.5 fl oz\",\n}: ProductCard_10Props = {}) {\n  const isLowStock = availableStock <= 20;\n  const hasDiscount = originalPrice > price;\n\n  return (\n    <div className=\"group flex flex-col overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm transition-all duration-300 hover:shadow-md sm:flex-row dark:border-gray-800 dark:bg-gray-900\">\n      {/* Image section */}\n      <div className=\"relative h-52 w-full bg-gradient-to-br from-amber-50 via-lime-50 to-emerald-50 sm:h-auto sm:w-2/5 dark:from-gray-900 dark:via-emerald-950/20 dark:to-gray-900\">\n        {newProduct && (\n          <div className=\"absolute top-3 left-3 z-10 flex items-center justify-center\">\n            <div className=\"rounded-full bg-emerald-600 px-3 py-1 text-xs font-bold tracking-wider text-white uppercase shadow-md\">\n              New Formula\n            </div>\n          </div>\n        )}\n\n        {/* Soft glow effect */}\n        <div className=\"absolute inset-0\">\n          <div className=\"absolute -top-10 -left-10 h-32 w-32 rounded-full bg-amber-300/30 blur-2xl\"></div>\n          <div className=\"absolute right-0 -bottom-8 h-28 w-28 rounded-full bg-emerald-400/20 blur-xl\"></div>\n        </div>\n\n        {/* Image with hover effect */}\n        <div className=\"flex h-full w-full items-center justify-center p-4\">\n          <div className=\"h-full w-full transition-all duration-500 group-hover:scale-[1.05] group-hover:rotate-1\">\n            <ImageViewer\n              imageUrl={imageUrl}\n              classNameThumbnailViewer=\"rounded-lg w-full h-full object-contain drop-shadow-lg\"\n            />\n          </div>\n        </div>\n      </div>\n\n      {/* Content section */}\n      <div className=\"flex flex-1 flex-col justify-between p-6\">\n        <div>\n          {/* Product name, price, and description */}\n          <div className=\"mb-4\">\n            <div className=\"mb-1.5 flex items-center justify-between\">\n              <h3 className=\"text-xl font-bold text-gray-900 dark:text-white\">\n                {productName}\n              </h3>\n              {hasDiscount ? (\n                <PriceFormat_Sale\n                  originalPrice={originalPrice}\n                  salePrice={price}\n                  prefix={currencyPrefix}\n                  classNameOriginalPrice=\"text-sm text-gray-500 dark:text-gray-400\"\n                  classNameSalePrice=\"text-xl font-bold text-emerald-700 dark:text-emerald-400\"\n                  showSavePercentage={false}\n                />\n              ) : (\n                <span className=\"text-xl font-bold text-emerald-700 dark:text-emerald-400\">\n                  {currencyPrefix}\n                  {price.toFixed(2)}\n                </span>\n              )}\n            </div>\n            <p className=\"text-sm text-gray-600 dark:text-gray-400\">\n              {volume} • {skinType}\n            </p>\n            <p className=\"mt-2 line-clamp-2 text-sm text-gray-600 dark:text-gray-400\">\n              {description}\n            </p>\n          </div>\n\n          {/* Benefits and ingredients */}\n          <div className=\"mb-5 grid grid-cols-2 gap-4\">\n            <div>\n              <p className=\"mb-1 text-xs font-semibold text-gray-700 dark:text-gray-300\">\n                KEY BENEFITS\n              </p>\n              <ul className=\"space-y-0.5\">\n                {benefits.map((benefit, index) => (\n                  <li key={index} className=\"flex items-center text-sm\">\n                    <svg\n                      className=\"mr-1.5 h-4 w-4 shrink-0 text-emerald-600\"\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=\"M5 13l4 4L19 7\"\n                      />\n                    </svg>\n                    <span className=\"text-gray-700 dark:text-gray-300\">\n                      {benefit}\n                    </span>\n                  </li>\n                ))}\n              </ul>\n            </div>\n            <div>\n              <p className=\"mb-1 text-xs font-semibold text-gray-700 dark:text-gray-300\">\n                INGREDIENTS\n              </p>\n              <ul className=\"space-y-0.5\">\n                {ingredients.map((ingredient, index) => (\n                  <li key={index} className=\"flex items-center text-sm\">\n                    <svg\n                      className=\"mr-1.5 h-4 w-4 shrink-0 text-amber-600\"\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                    <span className=\"text-gray-700 dark:text-gray-300\">\n                      {ingredient}\n                    </span>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          </div>\n        </div>\n\n        {/* Bottom section with availability and buttons */}\n        <div className=\"flex flex-col justify-between gap-3 sm:flex-row sm:items-end\">\n          <div>\n            {isLowStock ? (\n              <p className=\"text-xs font-medium text-amber-600 dark:text-amber-400\">\n                <span className=\"mr-1 inline-block h-2 w-2 animate-pulse rounded-full bg-amber-500\"></span>\n                Only {availableStock} units left\n              </p>\n            ) : (\n              <p className=\"text-xs font-medium text-emerald-600 dark:text-emerald-400\">\n                <span className=\"mr-1 inline-block h-2 w-2 rounded-full bg-emerald-500\"></span>\n                In Stock\n              </p>\n            )}\n            <p className=\"text-xs text-gray-500 dark:text-gray-400\">\n              Free shipping on orders over {currencyPrefix}35\n            </p>\n          </div>\n\n          {/* Action buttons */}\n          <div className=\"flex space-x-2\">\n            <Button\n              variant=\"outline\"\n              onClick={onLearnMore}\n              className=\"border-gray-300 bg-white text-gray-700 hover:border-amber-500 hover:bg-amber-50 hover:text-amber-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:hover:border-amber-600 dark:hover:bg-amber-950/30\"\n            >\n              Details\n            </Button>\n            <Button\n              variant=\"outline\"\n              onClick={onAddToCart}\n              className=\"border-emerald-200 bg-white text-emerald-700 hover:border-emerald-500 hover:bg-emerald-50 hover:text-emerald-700 dark:border-emerald-900 dark:bg-gray-800 dark:text-emerald-200 dark:hover:border-emerald-700 dark:hover:bg-emerald-950/30\"\n            >\n              Add to bag\n            </Button>\n            <Button\n              onClick={onBuyNow}\n              className=\"bg-emerald-700 text-white hover:bg-emerald-800 dark:bg-emerald-700 dark:hover:bg-emerald-600\"\n            >\n              Buy now\n            </Button>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default ProductCard_10;\nexport type { ProductCard_10Props };\n",
      "path": "/components/commerce-ui/blocks/product-card/product-card-10.tsx",
      "target": "components/commerce-ui/product-card-10.tsx"
    }
  ]
}