{product.name}

\n \n {/* Rating */}\n {product.rating > 0 && (\n

\n {[...Array(5)].map((_, i) => (\n \n {i < Math.floor(product.rating) ? '★' : '☆'}\n \n ))}\n

\n \n {product.rating} ({product.reviewCount} reviews)\n \n

\n )}\n \n {/* Price */}\n

\n \n {formatPrice(product.price)}\n \n {product.originalPrice && (\n <>\n \n {formatPrice(product.originalPrice)}\n \n \n -{discount}% OFF\n \n \n )}\n

\n \n {/* Stock Status */}\n

\n {stockStatus.text}\n

\n\n {/* Size Selection */}\n

Size

\n {product.sizes.map((size) => (\n setSelectedSize(size)}\n className={`\n py-2 px-3 border rounded-lg text-sm font-medium transition-colors\n ${selectedSize === size\n ? 'border-indigo-600 bg-indigo-50 text-indigo-600'\n : 'border-gray-300 text-gray-700 hover:border-gray-400'\n }\n `}\n >\n {size}\n \n ))}\n

\n\n {/* Color Selection */}\n

Color

\n {product.colors.map((color) => (\n setSelectedColor(color)}\n className={`\n py-2 px-4 border rounded-lg text-sm font-medium transition-colors\n ${selectedColor === color\n ? 'border-indigo-600 bg-indigo-50 text-indigo-600'\n : 'border-gray-300 text-gray-700 hover:border-gray-400'\n }\n `}\n >\n {color}\n \n ))}\n

\n\n {/* Quantity */}\n

Quantity

\n setQuantity(Math.max(1, quantity - 1))}\n className=\"w-10 h-10 border border-gray-300 rounded-lg flex items-center justify-center hover:bg-gray-100\"\n >\n −\n \n {quantity}\n setQuantity(quantity + 1)}\n className=\"w-10 h-10 border border-gray-300 rounded-lg flex items-center justify-center hover:bg-gray-100\"\n >\n +\n \n

\n\n {/* Description */}\n

Description

{product.description}

Product not found

{product.name}

Size

Color

Quantity

Description