{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "product-detail-01",
  "type": "registry:block",
  "title": "Product Detail 01",
  "files": [
    {
      "path": "src/components/commercn/product-details/product-detail-01.tsx",
      "content": "\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { ChevronLeft, ChevronRight, Minus, Plus, Star } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { useState } from \"react\";\n\nconst productData = {\n\tname: \"Man Black Cotton T-Shirt\",\n\tdescription:\n\t\t\"A comfortable and durable cotton t-shirt for men. Gives you a perfect fit and a great look for every occasion.\",\n\tcategory: \"Clothing\",\n\trating: 4.9,\n\toriginalPrice: 25.4,\n\tdiscount: 6,\n\tcurrency: \"$\",\n\timages: [\n\t\t\"https://images.unsplash.com/photo-1502389614483-e475fc34407e?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=774\",\n\t\t\"https://images.unsplash.com/photo-1618453292459-53424b66bb6a?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=928\",\n\t\t\"https://images.unsplash.com/photo-1618453292507-4959ece6429e?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=928\",\n\t\t\"https://images.unsplash.com/photo-1617984102437-a4aa52284d00?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=774\",\n\t],\n\tsizes: [\"S\", \"M\", \"L\", \"XL\", \"XXL\"],\n\tstockMessage: \"Last 1 left - make it yours!\",\n};\n\nexport function ProductDetailOne() {\n\tconst [currentImageIndex, setCurrentImageIndex] = useState(0);\n\tconst [selectedSize, setSelectedSize] = useState(\"S\");\n\tconst [selectedColor, setSelectedColor] = useState(0);\n\tconst [quantity, setQuantity] = useState(1);\n\n\tconst nextImage = () => {\n\t\tsetCurrentImageIndex((prev) => (prev + 1) % productData.images.length);\n\t};\n\n\tconst prevImage = () => {\n\t\tsetCurrentImageIndex(\n\t\t\t(prev) =>\n\t\t\t\t(prev - 1 + productData.images.length) % productData.images.length,\n\t\t);\n\t};\n\n\tconst incrementQuantity = () => setQuantity((prev) => prev + 1);\n\tconst decrementQuantity = () => setQuantity((prev) => Math.max(1, prev - 1));\n\n\treturn (\n\t\t<div className=\"w-full max-w-6xl mx-auto p-6 not-prose\">\n\t\t\t<div className=\"grid grid-cols-1 lg:grid-cols-2 gap-12\">\n\t\t\t\t{/* Image Section */}\n\t\t\t\t<div className=\"flex gap-2\">\n\t\t\t\t\t<div className=\"flex flex-col w-28 gap-2\">\n\t\t\t\t\t\t{productData.images.map((image, index) => (\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\t\tonClick={() => setCurrentImageIndex(index)}\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\"aspect-square bg-gray-100 rounded-lg overflow-hidden border-2 transition-colors\",\n\t\t\t\t\t\t\t\t\tcurrentImageIndex === index\n\t\t\t\t\t\t\t\t\t\t? \"border-gray-900\"\n\t\t\t\t\t\t\t\t\t\t: \"border-transparent\",\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\tsrc={image}\n\t\t\t\t\t\t\t\t\talt={`${productData.name} ${index + 1}`}\n\t\t\t\t\t\t\t\t\tclassName=\"w-full h-full object-cover\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"flex-1 relative aspect-[3/4] bg-gray-100 rounded-lg overflow-hidden\">\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tsrc={productData.images[currentImageIndex]}\n\t\t\t\t\t\t\talt={productData.name}\n\t\t\t\t\t\t\tclassName=\"w-full h-full object-cover\"\n\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t{/* Navigation Arrows */}\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\t\tclassName=\"absolute left-4 top-1/2 -translate-y-1/2 bg-white/80 backdrop-blur-sm rounded-full\"\n\t\t\t\t\t\t\tonClick={prevImage}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ChevronLeft className=\"w-4 h-4\" />\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\t\tclassName=\"absolute right-4 top-1/2 -translate-y-1/2 bg-white/80 backdrop-blur-sm rounded-full\"\n\t\t\t\t\t\t\tonClick={nextImage}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ChevronRight className=\"w-4 h-4\" />\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t{/* Product Info Section */}\n\t\t\t\t<div className=\"space-y-6\">\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref=\"#\"\n\t\t\t\t\t\t\tclassName=\"text-muted-foreground hover:text-gray-900 inline-block mb-2\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{productData.category}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t\t<h1 className=\"text-3xl font-bold\">{productData.name}</h1>\n\t\t\t\t\t\t<p className=\"text-muted-foreground\">{productData.description}</p>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"flex items-end gap-2\">\n\t\t\t\t\t\t<p className=\"text-3xl font-bold\">\n\t\t\t\t\t\t\t{productData.currency}\n\t\t\t\t\t\t\t{productData.originalPrice - productData.discount}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<p className=\"text-gray-400 font-medium text-2xl line-through\">\n\t\t\t\t\t\t\t{productData.currency}\n\t\t\t\t\t\t\t{productData.originalPrice}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<h3 className=\"text-sm font-medium mb-2\">Available Sizes:</h3>\n\t\t\t\t\t\t<div className=\"flex gap-2\">\n\t\t\t\t\t\t\t{productData.sizes.map((size) => (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tkey={size}\n\t\t\t\t\t\t\t\t\tvariant={selectedSize === size ? \"default\" : \"outline\"}\n\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\tonClick={() => setSelectedSize(size)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{size}\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"flex items-center gap-4\">\n\t\t\t\t\t\t<div className=\"flex items-center border border-gray-300 rounded-lg\">\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\t\t\tclassName=\"h-10 w-10 rounded-lg hover:bg-gray-100\"\n\t\t\t\t\t\t\t\tonClick={decrementQuantity}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Minus className=\"w-4 h-4\" />\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t<span className=\"w-12 text-center font-medium\">{quantity}</span>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\t\t\tclassName=\"h-10 w-10 rounded-lg hover:bg-gray-100\"\n\t\t\t\t\t\t\t\tonClick={incrementQuantity}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Plus className=\"w-4 h-4\" />\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<Button size=\"lg\">Add to cart</Button>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n",
      "type": "registry:component"
    }
  ]
}