product-card-13-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 StarRating_Fractions from "@/components/commerce-ui/star-rating-fractions";
6import { Button } from "@/components/ui/button";
7import {
8  BadgeCheck,
9  Calendar,
10  Heart,
11  MapPin,
12  Shield,
13  Users,
14} from "lucide-react";
15import { useState } from "react";
16 
17const DEFAULT_IMAGE_URL =
18  "https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/family-01.jpg";
19 
20interface ProductCard_13Props {
21  imageUrl?: string;
22  featuredProperty?: boolean;
23  hotelName?: string;
24  description?: string;
25  pricePerNight?: number;
26  originalPricePerNight?: number;
27  availableRooms?: number;
28  location?: string;
29  distanceFromCenter?: string;
30  rating?: number;
31  reviewCount?: number;
32  amenities?: string[];
33  specialOffers?: string[];
34  onBookNow?: () => void;
35  onViewDetails?: () => void;
36  currencyPrefix?: string;
37  limitedDeal?: boolean;
38  roomsAtCurrentPrice?: number;
39}
40 
41function ProductCard_13({
42  amenities = [
43    "Free Wi-Fi",
44    "Breakfast included",
45    "Swimming pool",
46    "Fitness center",
47  ],
48  availableRooms = 5,
49  currencyPrefix = "$",
50  description = "Contemporary hotel featuring elegant rooms with city views, restaurant serving local cuisine, and a rooftop terrace with panoramic views. Located in the vibrant downtown area.",
51  distanceFromCenter = "1.2 km from centre",
52  featuredProperty = true,
53  hotelName = "Grand Azure Hotel & Spa",
54  imageUrl = DEFAULT_IMAGE_URL,
55  limitedDeal = true,
56  location = "Downtown, New York",
57  onBookNow = () => {},
58  onViewDetails = () => {},
59  originalPricePerNight = 249,
60  pricePerNight = 199,
61  rating = 4.5,
62  reviewCount = 386,
63  roomsAtCurrentPrice = 2,
64  specialOffers = ["Free cancellation", "Pay at the property"],
65}: ProductCard_13Props = {}) {
66  const [isFavorite, setIsFavorite] = useState(false);
67  const isLowAvailability = availableRooms <= 3;
68  const hasDiscount = originalPricePerNight > pricePerNight;
69 
70  const toggleFavorite = (e: React.MouseEvent) => {
71    e.stopPropagation();
72    setIsFavorite(!isFavorite);
73  };
74 
75  return (
76    <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">
77      {/* Image section */}
78// … truncated