{
  "name": "product-card-07-block",
  "type": "registry:block",
  "dependencies": [
    "lucide-react"
  ],
  "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\";\nimport {\n  Check,\n  ChevronLeft,\n  ChevronRight,\n  MessageSquareText,\n} from \"lucide-react\";\nimport { useState } from \"react\";\n\nconst DEFAULT_IMAGE_URL =\n  \"https://images.pexels.com/photos/6883802/pexels-photo-6883802.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\";\n\ninterface Testimonial {\n  name: string;\n  role?: string;\n  rating: number;\n  text: string;\n  date?: string;\n}\n\ninterface ProductCard_07Props {\n  imageUrl?: string;\n  productName?: string;\n  description?: string;\n  price?: number;\n  inStock?: boolean;\n  features?: string[];\n  testimonials?: Testimonial[];\n  onAddToCart?: () => void;\n  onBuyNow?: () => void;\n  currencyPrefix?: string;\n}\n\nfunction ProductCard_07({\n  currencyPrefix = \"$\",\n  description = \"Professional-grade mirrorless camera with 32MP sensor and 4K video recording capabilities\",\n  features = [\n    \"32 Megapixel Sensor\",\n    \"4K Video Recording\",\n    \"5-Axis Stabilization\",\n    \"Weather-Sealed Body\",\n  ],\n  imageUrl = DEFAULT_IMAGE_URL,\n  inStock = true,\n  onAddToCart = () => {},\n  onBuyNow = () => {},\n  price = 1299.99,\n  productName = \"ProCapture X3 Digital Camera\",\n  testimonials = [\n    {\n      date: \"3 weeks ago\",\n      name: \"Michael Roberts\",\n      rating: 5,\n      role: \"Professional Photographer\",\n      text: \"The image quality is exceptional. I've switched from my DSLR and haven't looked back.\",\n    },\n    {\n      date: \"1 month ago\",\n      name: \"Sarah Chen\",\n      rating: 4,\n      role: \"Content Creator\",\n      text: \"Perfect for my YouTube videos. The autofocus is lightning fast!\",\n    },\n    {\n      date: \"2 months ago\",\n      name: \"Alex Johnson\",\n      rating: 5,\n      text: \"Worth every penny. The low light performance is incredible.\",\n    },\n  ],\n}: ProductCard_07Props = {}) {\n  const [activeTestimonial, setActiveTestimonial] = useState(0);\n\n  return (\n    <div className=\"flex flex-col overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-900\">\n      {/* Main product card */}\n      <div className=\"group flex flex-col sm:h-[220px] sm:flex-row\">\n        {/* Image section */}\n        <div className=\"relative h-52 w-full bg-gradient-to-br from-gray-50 via-green-50 to-emerald-50 sm:h-full sm:w-2/5 dark:from-gray-900 dark:via-green-950/10 dark:to-emerald-950/10\">\n          <div className=\"absolute inset-0\">\n            <div className=\"absolute -top-10 -right-10 h-32 w-32 rounded-full bg-emerald-300/20 blur-2xl\"></div>\n            <div className=\"absolute -bottom-8 left-0 h-28 w-28 rounded-full bg-green-400/20 blur-xl\"></div>\n          </div>\n\n          {/* Product label */}\n          {inStock ? (\n            <div className=\"absolute top-3 left-3 z-10\">\n              <div className=\"rounded-md bg-green-500 px-2 py-1 text-xs font-bold tracking-wider text-white uppercase shadow-md\">\n                In Stock\n              </div>\n            </div>\n          ) : (\n            <div className=\"absolute top-3 left-3 z-10\">\n              <div className=\"rounded-md bg-amber-500 px-2 py-1 text-xs font-bold tracking-wider text-white uppercase shadow-md\">\n                Pre-order\n              </div>\n            </div>\n          )}\n\n          {/* Image with hover effect */}\n          <div className=\"flex h-full items-center justify-center p-4\">\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=\"flex flex-1 flex-col justify-between p-5\">\n          <div>\n            {/* Product name, price and description */}\n            <div className=\"mb-3\">\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-emerald-600 dark:text-emerald-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            {/* Features list */}\n            <div className=\"mb-3\">\n              <ul className=\"grid grid-cols-2 gap-x-4 gap-y-1\">\n                {features.map((feature, index) => (\n                  <li key={index} className=\"flex items-center text-sm\">\n                    <Check className=\"mr-1.5 h-4 w-4 text-emerald-500\" />\n                    <span className=\"text-gray-700 dark:text-gray-300\">\n                      {feature}\n                    </span>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          </div>\n\n          {/* Action buttons */}\n          <div className=\"flex space-x-2\">\n            <Button\n              variant=\"outline\"\n              onClick={onAddToCart}\n              className=\"flex-1 border-gray-300 bg-white text-gray-700 hover:border-emerald-500 hover:bg-emerald-50 hover:text-emerald-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200\"\n            >\n              Add to cart\n            </Button>\n            <Button\n              onClick={onBuyNow}\n              className=\"flex-1 bg-emerald-600 text-white hover:bg-emerald-700\"\n            >\n              Buy now\n            </Button>\n          </div>\n        </div>\n      </div>\n\n      {/* Compact horizontal testimonials section */}\n      <div className=\"border-t border-gray-200 bg-gray-50 p-4 dark:border-gray-800 dark:bg-gray-900/50\">\n        <div className=\"mb-3 flex items-center justify-between\">\n          <h4 className=\"flex items-center text-base font-medium text-gray-900 dark:text-white\">\n            <MessageSquareText className=\"mr-2 h-5 w-5 text-emerald-500 dark:text-emerald-400\" />\n            Customer Reviews\n          </h4>\n          <div className=\"text-sm text-gray-500 dark:text-gray-400\">\n            {testimonials.length} reviews\n          </div>\n        </div>\n\n        {/* Current testimonial */}\n        <div className=\"mb-3 rounded-lg border border-gray-200 bg-white p-3 shadow-sm dark:border-gray-700 dark:bg-gray-800\">\n          <div className=\"mb-2 flex items-center justify-between\">\n            <div className=\"flex items-center\">\n              <div className=\"mr-2 flex h-7 w-7 items-center justify-center rounded-full bg-gradient-to-br from-emerald-400 to-green-500 text-center font-medium text-white\">\n                {testimonials[activeTestimonial].name.charAt(0)}\n              </div>\n              <div>\n                <p className=\"font-medium text-gray-800 dark:text-gray-200\">\n                  {testimonials[activeTestimonial].name}\n                </p>\n                {testimonials[activeTestimonial].role && (\n                  <p className=\"text-xs text-gray-500 dark:text-gray-400\">\n                    {testimonials[activeTestimonial].role}\n                  </p>\n                )}\n              </div>\n            </div>\n\n            <StarRating_Fractions\n              value={testimonials[activeTestimonial].rating}\n              readOnly={true}\n              iconSize={16}\n              color=\"#F59E0B\" // amber-400 color\n              className=\"flex-shrink-0\"\n            />\n          </div>\n\n          <p className=\"text-sm text-gray-600 dark:text-gray-300\">\n            {testimonials[activeTestimonial].text}\n          </p>\n\n          <p className=\"mt-1 text-xs text-gray-500 dark:text-gray-400\">\n            {testimonials[activeTestimonial].date}\n          </p>\n        </div>\n\n        {/* Testimonial navigation */}\n        <div className=\"flex items-center justify-between\">\n          <div className=\"flex space-x-1\">\n            {testimonials.map((_, index) => (\n              <button\n                key={index}\n                onClick={() => setActiveTestimonial(index)}\n                className={`h-2 w-6 rounded-full transition-colors ${\n                  activeTestimonial === index\n                    ? \"bg-emerald-500\"\n                    : \"bg-gray-300 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600\"\n                }`}\n                aria-label={`View review ${index + 1}`}\n              />\n            ))}\n          </div>\n\n          <div className=\"flex space-x-1\">\n            <button\n              onClick={() =>\n                setActiveTestimonial((prev) =>\n                  prev === 0 ? testimonials.length - 1 : prev - 1\n                )\n              }\n              className=\"rounded p-1 text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-700\"\n              aria-label=\"Previous review\"\n            >\n              <ChevronLeft className=\"h-5 w-5\" />\n            </button>\n            <button\n              onClick={() =>\n                setActiveTestimonial((prev) =>\n                  prev === testimonials.length - 1 ? 0 : prev + 1\n                )\n              }\n              className=\"rounded p-1 text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-700\"\n              aria-label=\"Next review\"\n            >\n              <ChevronRight className=\"h-5 w-5\" />\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default ProductCard_07;\nexport type { ProductCard_07Props, Testimonial };\n",
      "path": "/components/commerce-ui/blocks/product-card/product-card-07.tsx",
      "target": "components/commerce-ui/product-card-07.tsx"
    }
  ]
}