{
  "name": "product-card-08-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"
  ],
  "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 { Button } from \"@/components/ui/button\";\n\nconst DEFAULT_IMAGE_URL =\n  \"https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/tablet-01.jpg\";\n\ninterface Review {\n  name: string;\n  rating: number;\n  text: string;\n  verified?: boolean;\n}\n\ninterface ProductCard_08Props {\n  imageUrl?: string;\n  productName?: string;\n  description?: string;\n  price?: number;\n  inStock?: boolean;\n  stockCount?: number;\n  isNew?: boolean;\n  reviews?: Review[];\n  onAddToCart?: () => void;\n  onBuyNow?: () => void;\n  currencyPrefix?: string;\n}\n\nfunction ProductCard_08({\n  currencyPrefix = \"$\",\n  description = \"Powerful tablet with stunning display, long battery life, and a lightweight design\",\n  imageUrl = DEFAULT_IMAGE_URL,\n  inStock = true,\n  isNew = true,\n  onAddToCart = () => {},\n  onBuyNow = () => {},\n  price = 499.99,\n  productName = \"Ultra Tablet Pro\",\n  reviews = [\n    {\n      name: \"David K.\",\n      rating: 5,\n      text: \"Perfect for my work and entertainment needs. Fast processor!\",\n      verified: true,\n    },\n    {\n      name: \"Maria L.\",\n      rating: 4,\n      text: \"Great device, impressive screen quality.\",\n    },\n    {\n      name: \"Jason R.\",\n      rating: 5,\n      text: \"Amazing battery life, lasts all day easily.\",\n      verified: true,\n    },\n  ],\n  stockCount = 24,\n}: ProductCard_08Props = {}) {\n  // Calculate average rating\n  const avgRating =\n    reviews.length > 0\n      ? reviews.reduce((sum, review) => sum + review.rating, 0) / reviews.length\n      : 0;\n\n  return (\n    <div className=\"flex flex-col overflow-hidden rounded-xl\">\n      {/* Main product card */}\n      <div className=\"group flex flex-col overflow-hidden rounded-xl border border-gray-200 bg-white transition-all duration-300 hover:shadow-md sm:h-[220px] 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-blue-50 via-purple-50 to-blue-50 p-6 sm:h-full sm:w-2/5 dark:from-gray-900 dark:via-purple-950/10 dark:to-gray-900\">\n          {/* New badge */}\n          {isNew && (\n            <div className=\"absolute top-3 left-3 z-10\">\n              <div className=\"rounded-full bg-blue-600 px-2.5 py-1 text-xs font-bold text-white shadow-sm\">\n                NEW\n              </div>\n            </div>\n          )}\n\n          {/* Background glow effect */}\n          <div className=\"absolute inset-0\">\n            <div className=\"absolute -bottom-10 left-1/2 h-40 w-40 -translate-x-1/2 transform rounded-full bg-purple-500/20 blur-2xl\"></div>\n          </div>\n\n          {/* Image with hover effect */}\n          <div className=\"flex h-full items-center justify-center\">\n            <div className=\"transition-all duration-500 group-hover:scale-105 group-hover:rotate-1\">\n              <ImageViewer\n                imageUrl={imageUrl}\n                classNameThumbnailViewer=\"rounded-lg object-contain h-[180px] max-h-full mx-auto 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-5\">\n          <div>\n            {/* Product name and description */}\n            <div className=\"mb-4\">\n              <div className=\"flex items-center justify-between\">\n                <h3 className=\"text-xl font-bold text-gray-900 dark:text-white\">\n                  {productName}\n                </h3>\n                <PriceFormat\n                  prefix={currencyPrefix}\n                  value={price}\n                  className=\"text-xl font-bold text-blue-600 dark:text-blue-400\"\n                />\n              </div>\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            {/* Rating summary */}\n            <div className=\"mb-4 flex items-center\">\n              <div className=\"flex\">\n                {[...Array(5)].map((_, i) => (\n                  <svg\n                    key={i}\n                    className={`h-4 w-4 ${\n                      i < Math.floor(avgRating)\n                        ? \"text-amber-400\"\n                        : i < avgRating && i + 1 > avgRating\n                          ? \"text-amber-400\"\n                          : \"text-gray-300\"\n                    }`}\n                    fill=\"currentColor\"\n                    viewBox=\"0 0 20 20\"\n                  >\n                    {i < avgRating && i + 1 > avgRating ? (\n                      // Half star\n                      <defs>\n                        <linearGradient id=\"halfStarGradient\">\n                          <stop offset=\"50%\" stopColor=\"currentColor\" />\n                          <stop offset=\"50%\" stopColor=\"#D1D5DB\" />\n                        </linearGradient>\n                      </defs>\n                    ) : null}\n                    <path\n                      fill={\n                        i < avgRating && i + 1 > avgRating\n                          ? \"url(#halfStarGradient)\"\n                          : \"currentColor\"\n                      }\n                      d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\n                    />\n                  </svg>\n                ))}\n              </div>\n              <span className=\"ml-2 text-sm text-gray-600 dark:text-gray-400\">\n                {avgRating.toFixed(1)} ({reviews.length} reviews)\n              </span>\n            </div>\n          </div>\n\n          {/* Bottom section with availability and buttons */}\n          <div className=\"flex items-center justify-between\">\n            <div>\n              {inStock ? (\n                stockCount <= 10 ? (\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 {stockCount} left in stock\n                  </p>\n                ) : (\n                  <p className=\"text-xs font-medium text-green-600 dark:text-green-400\">\n                    <span className=\"mr-1 inline-block h-2 w-2 rounded-full bg-green-500\"></span>\n                    In Stock\n                  </p>\n                )\n              ) : (\n                <p className=\"text-xs font-medium text-red-600 dark:text-red-400\">\n                  <span className=\"mr-1 inline-block h-2 w-2 rounded-full bg-red-500\"></span>\n                  Out of Stock\n                </p>\n              )}\n            </div>\n\n            {/* Action buttons */}\n            <div className=\"flex space-x-2\">\n              <Button\n                variant=\"outline\"\n                onClick={onAddToCart}\n                disabled={!inStock}\n                className=\"border-gray-300 bg-white text-gray-700 transition-all hover:border-purple-500 hover:bg-purple-50 hover:text-purple-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:hover:border-purple-500\"\n              >\n                Add to cart\n              </Button>\n              <Button\n                onClick={onBuyNow}\n                disabled={!inStock}\n                className=\"bg-purple-600 text-white transition-all hover:bg-purple-700\"\n              >\n                Buy now\n              </Button>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      {/* Compact customer reviews section */}\n      {reviews.length > 0 && (\n        <div className=\"mt-3 space-y-2 rounded-xl bg-gray-50 p-3 dark:bg-gray-800/50\">\n          <div className=\"mb-2 flex items-center justify-between border-b border-gray-200 pb-2 dark:border-gray-700\">\n            <h4 className=\"text-sm font-medium text-gray-900 dark:text-white\">\n              Recent Customer Reviews\n            </h4>\n            <span className=\"text-xs text-blue-600 hover:underline dark:text-blue-400\">\n              View all\n            </span>\n          </div>\n\n          <div className=\"space-y-1.5\">\n            {reviews.map((review, index) => (\n              <div\n                key={index}\n                className=\"flex items-center justify-between text-sm\"\n              >\n                <div className=\"flex items-center space-x-2\">\n                  <span className=\"font-medium text-gray-800 dark:text-gray-200\">\n                    {review.name}\n                  </span>\n                  {review.verified && (\n                    <span className=\"inline-flex items-center rounded-full bg-green-100 px-1.5 py-0.5 text-xs font-medium text-green-700 dark:bg-green-900/30 dark:text-green-400\">\n                      <svg\n                        className=\"mr-0.5 h-3 w-3\"\n                        fill=\"currentColor\"\n                        viewBox=\"0 0 20 20\"\n                      >\n                        <path\n                          fillRule=\"evenodd\"\n                          d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\n                          clipRule=\"evenodd\"\n                        />\n                      </svg>\n                      Verified\n                    </span>\n                  )}\n                </div>\n\n                <div className=\"flex flex-1 items-center justify-end space-x-4 pl-2\">\n                  <span className=\"line-clamp-1 flex-1 text-right text-xs text-gray-600 dark:text-gray-400\">\n                    {review.text}\n                  </span>\n\n                  <div className=\"flex\">\n                    {[...Array(5)].map((_, i) => (\n                      <svg\n                        key={i}\n                        className={`h-3 w-3 ${i < review.rating ? \"text-amber-400\" : \"text-gray-300\"}`}\n                        fill=\"currentColor\"\n                        viewBox=\"0 0 20 20\"\n                      >\n                        <path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\" />\n                      </svg>\n                    ))}\n                  </div>\n                </div>\n              </div>\n            ))}\n          </div>\n\n          <div className=\"mt-2 border-t border-gray-200 pt-2 text-center dark:border-gray-700\">\n            <button className=\"text-xs font-medium text-purple-600 hover:text-purple-700 dark:text-purple-400\">\n              Write a review\n            </button>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport default ProductCard_08;\nexport type { ProductCard_08Props, Review };\n",
      "path": "/components/commerce-ui/blocks/product-card/product-card-08.tsx",
      "target": "components/commerce-ui/product-card-08.tsx"
    }
  ]
}