product-card-10-block

1"use client";
2 
3import ImageViewer from "@/components/commerce-ui/image-viewer-basic";
4import PriceFormat_Sale from "@/components/commerce-ui/price-format-sale";
5import { Button } from "@/components/ui/button";
6 
7const DEFAULT_IMAGE_URL =
8  "https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/handcream-01.jpg";
9 
10interface ProductCard_10Props {
11  imageUrl?: string;
12  newProduct?: boolean;
13  productName?: string;
14  description?: string;
15  price?: number;
16  originalPrice?: number;
17  availableStock?: number;
18  volume?: string;
19  skinType?: string;
20  benefits?: string[];
21  ingredients?: string[];
22  onAddToCart?: () => void;
23  onBuyNow?: () => void;
24  onLearnMore?: () => void;
25  currencyPrefix?: string;
26}
27 
28function ProductCard_10({
29  availableStock = 42,
30  benefits = [
31    "24h Hydration",
32    "Non-greasy formula",
33    "Repairs damaged skin",
34    "Dermatologist tested",
35  ],
36  currencyPrefix = "$",
37  description = "Ultra-hydrating hand cream formulated with shea butter, aloe vera, and vitamin E. Absorbs quickly for immediate relief of dry skin, leaving hands soft and nourished without greasy residue. Perfect for daily use and harsh weather protection.",
38  imageUrl = DEFAULT_IMAGE_URL,
39  ingredients = ["Shea Butter", "Aloe Vera", "Vitamin E", "Jojoba Oil"],
40  newProduct = true,
41  onAddToCart = () => {},
42  onBuyNow = () => {},
43  onLearnMore = () => {},
44  originalPrice = 29.99,
45  price = 24.99,
46  productName = "NatureSilk Intensive Hand Cream",
47  skinType = "All skin types",
48  volume = "75ml / 2.5 fl oz",
49}: ProductCard_10Props = {}) {
50  const isLowStock = availableStock <= 20;
51  const hasDiscount = originalPrice > price;
52 
53  return (
54    <div className="group flex flex-col overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm transition-all duration-300 hover:shadow-md sm:flex-row dark:border-gray-800 dark:bg-gray-900">
55      {/* Image section */}
56      <div className="relative h-52 w-full bg-gradient-to-br from-amber-50 via-lime-50 to-emerald-50 sm:h-auto sm:w-2/5 dark:from-gray-900 dark:via-emerald-950/20 dark:to-gray-900">
57        {newProduct && (
58          <div className="absolute top-3 left-3 z-10 flex items-center justify-center">
59            <div className="rounded-full bg-emerald-600 px-3 py-1 text-xs font-bold tracking-wider text-white uppercase shadow-md">
60              New Formula
61            </div>
62          </div>
63        )}
64 
65        {/* Soft glow effect */}
66        <div className="absolute inset-0">
67// … truncated