Product Detail Page - Copy this React, Tailwind Component to your project

import { Heart } from 'lucide-react'; import { useState } from 'react'; import { AiFillStar, AiOutlineStar } from 'react-icons/ai'; import { FaShoppingCart } from 'react-icons/fa'; import { IoMdAdd, IoMdRemove } from 'react-icons/io'; const ProductDetail = () => { const [selectedImage, setSelectedImage] = useState(0); const [quantity, setQuantity] = useState(1); const product = { name: 'Nike Air Max 270', brand: 'Nike', price: 159.99, rating: 4.5, reviews: 128, stock: 15, type: 'Sneakers', description: 'Experience ultimate comfort and style with the Nike Air Max 270. These innovative running shoes feature responsive cushioning, breathable mesh upper, and the iconic Air unit in the heel for exceptional impact protection.', sizes: ['40', '41', '42', '43', '44'], colors: [ { name: 'Black/White', image: 'https://placehold.co/400', }, { name: 'Red/Black', image: 'https://placehold.co/400', }, { name: 'Blue/Grey', image: 'https://placehold.co/400', }, { name: 'All White', image: 'https://placehold.co/400', }, ], material: 'Engineered mesh with synthetic overlays', images: [ 'https://placehold.co/400', 'https://placehold.co/400', 'https://placehold.co/400', 'https://placehold.co/400', ], }; const handleQuantityChange = (value: number) => { const newQuantity = quantity + value; if (newQuantity >= 1 && newQuantity <= product.stock) { setQuantity(newQuantity); } }; const RatingStars = ({ rating }: { rating: number }) => { return ( <div className="flex items-center"> {[...Array(5)].map((_, index) => ( <span key={index}> {index < Math.floor(rating) ? ( <AiFillStar className="text-yellow-400 text-xs" /> ) : ( <AiOutlineStar className="text-yellow-400 text-xs" /> )} </span> ))} </div> ); }; return ( <div className="max-w-7xl mx-auto"> <div className="grid grid-cols-12 gap-10"> {/* Left Section - Product Images */} <div className="col-span-5"> <div className="relative overflow-hidden rounded-lg bg-gray-100 mb-2"> <img src={`${product.images[selectedImage]}`} alt={`${product.name} - View ${selectedImage + 1}`} className="w-full object-cover transition-transform duration-500 hover:scale-105" /> </div> <div className="grid grid-cols-4 gap-2"> {product.images.map((image, index) => ( <button key={index} onClick={() => setSelectedImage(index)} className={`relative overflow-hidden rounded-md ${ selectedImage === index ? 'ring-2 ring-theme-color-primary' : '' }`} > <img src={`${image}`} alt={`${product.name} Thumbnail ${index + 1}`} className="w-full object-cover" /> </button> ))} </div> </div> {/* Right Section - Product Information */} <div className="col-span-5"> <h1 className="text-2xl font-semibold mb-2">{product.name}</h1> <div className="flex items-center gap-4 mb-2"> <RatingStars rating={product.rating} /> <span className="text-[#9098B1] text-sm"> ({product.reviews} reviews) </span> <span className="text-xs text-[#40BFFF]"> Submit a review </span> </div> <div className=" flex items-center gap-3"> <p className="text-2xl font-bold text-[#40BFFF]"> ${product.price.toFixed(2)} </p> <span className="text-[#9098B1] text-sm line-through"> ${product.price.toFixed(2)} </span> <span className="text-[#FB7181] text-sm font-bold"> 24% Off </span> </div> <hr className="my-4" /> <div className="space-y-4 mb-6"> <div className="grid grid-cols-2 max-w-xs"> <span className="col-span-1">Brand:</span> <span className="col-span-1 text-left"> {product.brand} </span> </div> <div className="grid grid-cols-2 max-w-xs"> <span className="col-span-1">Type:</span> <span className="col-span-1 text-left"> {product.type} </span> </div> <div className="grid grid-cols-2 max-w-xs"> <span className="col-span-1">Availability:</span> <span className="col-span-1 text-left"> {product.stock} units </span> </div> </div> <div className="mb-3 grid grid-cols-2 max-w-xs"> <span className="col-span-1">Size:</span> <select className="select select-sm select-bordered w-fit col-span-1"> {product.sizes.map((size) => ( <option key={size}>{size}</option> ))} </select> </div> <div className="mb-6"> <h3 className=" mb-2">Color:</h3> <div className="flex flex-wrap gap-2"> {product.colors.map((color) => ( <button key={color.name} className="px-2 py-2 border rounded-md hover:border-theme-color-primary focus:outline-none focus:ring-2 focus:ring-theme-color-primary flex items-center gap-2" > <img className="w-6 h-6" src={color.image} alt={color.name} /> {color.name} </button> ))} </div> </div> <div className="flex items-center gap-4 mb-6"> <span className="font-semibold">Quantity:</span> <div className="flex items-center border rounded-md"> <button onClick={() => handleQuantityChange(-1)} className="p-2 hover:bg-gray-100" aria-label="Decrease quantity" > <IoMdRemove /> </button> <span className="px-4 py-2 border-x">{quantity}</span> <button onClick={() => handleQuantityChange(1)} className="p-2 hover:bg-gray-100" aria-label="Increase quantity" > <IoMdAdd /> </button> </div> <button className="btn ms-auto bg-[#ebf6ff] hover:bg-[#ebf6ff]/80 hover:border-[#40BFFF]"> <Heart size={16} color="#40BFFF" /> </button> </div> <div className="grid grid-cols-2 gap-4"> <button className="btn bg-[#ebf6ff] text-[#40BFFF] hover:bg-[#ebf6ff]/80 hover:border-[#40BFFF]"> <FaShoppingCart /> Add to Cart </button> <button className="btn bg-[#40BFFF] text-white hover:bg-[#40a5ff] hover:border-[#40BFFF]"> Buy Now </button> </div> </div> {/* Related Products */} <div className="col-span-2"> <h3 className="text-lg mb-2 text-[#C1C8CE]">Best Sellers</h3> <div className="space-y-4 border rounded-sm"> <div className="flex flex-col gap-2"> <img src="https://placehold.co/400" alt="" /> <div className="flex items-center justify-center gap-1"> <AiFillStar className="text-yellow-400 text-xs" /> <AiFillStar className="text-yellow-400 text-xs" /> <AiFillStar className="text-yellow-400 text-xs" /> <AiFillStar className="text-yellow-400 text-xs" /> <AiFillStar className="text-yellow-400 text-xs" /> </div> <div className="flex items-center gap-2 justify-center"> <span className="text-sm text-[#FB7181]">$159.99</span> <span className="text-xs text-[#9098B1] line-through"> $199.99 </span> </div> </div> </div> </div> </div> {/* Description & Comments */} </div> ); }; export default ProductDetail; Help me create description and comments section