product-card-12-block

1"use client";
2 
3import ImageViewer from "@/components/commerce-ui/image-viewer-basic";
4import PriceFormat from "@/components/commerce-ui/price-format-basic";
5import StarRating_Fractions from "@/components/commerce-ui/star-rating-fractions";
6import { Button } from "@/components/ui/button";
7 
8const DEFAULT_IMAGE_URL =
9  "https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/family-01.jpg";
10 
11interface ProductCard_12Props {
12  imageUrl?: string;
13  specialOffer?: boolean;
14  packageName?: string;
15  description?: string;
16  pricePerPerson?: number;
17  availableSpots?: number;
18  departureDate?: string;
19  duration?: string;
20  features?: string[];
21  testimonial?: {
22    text: string;
23    author: string;
24    avatarUrl?: string;
25    rating?: number;
26  };
27  onBookNow?: () => void;
28  onLearnMore?: () => void;
29  currencyPrefix?: string;
30}
31 
32function ProductCard_12({
33  availableSpots = 8,
34  currencyPrefix = "$",
35  departureDate = "June 15, 2025",
36  description = "All-inclusive family vacation with activities for all ages, beachfront accommodations, and kids club access",
37  duration = "7 days / 6 nights",
38  features = [
39    "Kids Stay Free",
40    "Private Beach Access",
41    "Daily Activities",
42    "All Meals Included",
43  ],
44  imageUrl = DEFAULT_IMAGE_URL,
45  onBookNow = () => {},
46  onLearnMore = () => {},
47  packageName = "Family Paradise Beach Resort",
48  pricePerPerson = 799,
49  specialOffer = true,
50  testimonial = {
51    author: "Sarah Johnson",
52    avatarUrl:
53      "https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/user-03.jpg",
54    rating: 5,
55    text: "Our family had an amazing time! The kids club was fantastic and we actually got to relax. Best vacation we've had in years.",
56  },
57}: ProductCard_12Props = {}) {
58  const isLimitedAvailability = availableSpots <= 10;
59 
60  return (
61    <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 dark:border-gray-800 dark:bg-gray-900">
62      {/* Image section */}
63      <div className="relative h-52 w-full bg-gradient-to-br from-amber-50 via-orange-50 to-rose-50 sm:h-[220px] dark:from-gray-900 dark:via-orange-950/20 dark:to-gray-900">
64        {specialOffer && (
65          <div className="absolute top-3 left-3 z-10 flex items-center justify-center">
66// … truncated