{
  "name": "product-card-13-block",
  "type": "registry:block",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "https://ui.stackzero.co/r/image-viewer-basic.json",
    "https://ui.stackzero.co/r/price-format-sale.json",
    "https://ui.stackzero.co/r/star-rating-fractions.json"
  ],
  "files": [
    {
      "type": "registry:block",
      "content": "\"use client\";\n\nimport ImageViewer from \"@/components/commerce-ui/image-viewer-basic\";\nimport PriceFormat_Sale from \"@/components/commerce-ui/price-format-sale\";\nimport StarRating_Fractions from \"@/components/commerce-ui/star-rating-fractions\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  BadgeCheck,\n  Calendar,\n  Heart,\n  MapPin,\n  Shield,\n  Users,\n} from \"lucide-react\";\nimport { useState } from \"react\";\n\nconst DEFAULT_IMAGE_URL =\n  \"https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/family-01.jpg\";\n\ninterface ProductCard_13Props {\n  imageUrl?: string;\n  featuredProperty?: boolean;\n  hotelName?: string;\n  description?: string;\n  pricePerNight?: number;\n  originalPricePerNight?: number;\n  availableRooms?: number;\n  location?: string;\n  distanceFromCenter?: string;\n  rating?: number;\n  reviewCount?: number;\n  amenities?: string[];\n  specialOffers?: string[];\n  onBookNow?: () => void;\n  onViewDetails?: () => void;\n  currencyPrefix?: string;\n  limitedDeal?: boolean;\n  roomsAtCurrentPrice?: number;\n}\n\nfunction ProductCard_13({\n  amenities = [\n    \"Free Wi-Fi\",\n    \"Breakfast included\",\n    \"Swimming pool\",\n    \"Fitness center\",\n  ],\n  availableRooms = 5,\n  currencyPrefix = \"$\",\n  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.\",\n  distanceFromCenter = \"1.2 km from centre\",\n  featuredProperty = true,\n  hotelName = \"Grand Azure Hotel & Spa\",\n  imageUrl = DEFAULT_IMAGE_URL,\n  limitedDeal = true,\n  location = \"Downtown, New York\",\n  onBookNow = () => {},\n  onViewDetails = () => {},\n  originalPricePerNight = 249,\n  pricePerNight = 199,\n  rating = 4.5,\n  reviewCount = 386,\n  roomsAtCurrentPrice = 2,\n  specialOffers = [\"Free cancellation\", \"Pay at the property\"],\n}: ProductCard_13Props = {}) {\n  const [isFavorite, setIsFavorite] = useState(false);\n  const isLowAvailability = availableRooms <= 3;\n  const hasDiscount = originalPricePerNight > pricePerNight;\n\n  const toggleFavorite = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    setIsFavorite(!isFavorite);\n  };\n\n  return (\n    <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\">\n      {/* Image section */}\n      <div className=\"relative h-64 w-full bg-gradient-to-br from-blue-50 via-sky-50 to-teal-50 sm:h-auto sm:w-2/5 lg:w-1/3 dark:from-gray-900 dark:via-blue-950/20 dark:to-gray-900\">\n        {featuredProperty && (\n          <div className=\"absolute top-3 left-3 z-10 flex items-center justify-center\">\n            <div className=\"rounded-full bg-blue-600 px-3 py-1 text-xs font-bold tracking-wider text-white uppercase shadow-md\">\n              Top-rated\n            </div>\n          </div>\n        )}\n\n        <button\n          onClick={toggleFavorite}\n          className=\"absolute top-3 right-3 z-20 flex h-9 w-9 items-center justify-center rounded-full bg-white/90 shadow-md transition-all hover:bg-white dark:bg-gray-800/90 dark:hover:bg-gray-800\"\n          aria-label={isFavorite ? \"Remove from favorites\" : \"Add to favorites\"}\n        >\n          {isFavorite ? (\n            <Heart className=\"h-5 w-5 fill-rose-500 text-rose-500\" />\n          ) : (\n            <Heart className=\"h-5 w-5 text-gray-600 transition-colors hover:text-rose-500 dark:text-gray-400\" />\n          )}\n        </button>\n\n        {/* Soft glow effect */}\n        <div className=\"absolute inset-0\">\n          <div className=\"absolute -top-10 -left-10 h-32 w-32 rounded-full bg-sky-300/30 blur-2xl\"></div>\n          <div className=\"absolute right-0 -bottom-8 h-28 w-28 rounded-full bg-teal-400/20 blur-xl\"></div>\n        </div>\n\n        {/* Image with hover effect */}\n        <div className=\"absolute inset-0 flex h-full w-full items-center justify-center\">\n          <div className=\"h-full w-full transition-all duration-500 group-hover:scale-[1.03] group-hover:rotate-1\">\n            <ImageViewer\n              imageUrl={imageUrl}\n              classNameThumbnailViewer=\"absolute inset-0 h-full w-full object-cover\"\n            />\n          </div>\n        </div>\n      </div>\n\n      {/* Content section */}\n      <div className=\"flex flex-1 flex-col justify-between p-6\">\n        <div>\n          {/* Hotel name, location and rating */}\n          <div className=\"mb-4\">\n            <div className=\"mb-1.5 flex items-center justify-between\">\n              <div className=\"flex items-center gap-2\">\n                <h3 className=\"text-2xl font-bold text-gray-900 dark:text-white\">\n                  {hotelName}\n                </h3>\n                {featuredProperty && (\n                  <BadgeCheck className=\"h-5 w-5 text-blue-600 dark:text-blue-400\" />\n                )}\n              </div>\n              <div className=\"flex flex-col items-end\">\n                <div className=\"flex items-center gap-1.5\">\n                  <StarRating_Fractions\n                    value={rating}\n                    maxStars={5}\n                    readOnly\n                    iconSize={16}\n                    color=\"#0ea5e9\"\n                    className=\"inline-flex\"\n                  />\n                  <span className=\"text-sm font-medium text-gray-700 dark:text-gray-300\">\n                    {rating}\n                  </span>\n                </div>\n                <span className=\"text-xs text-gray-500 dark:text-gray-400\">\n                  {reviewCount} reviews\n                </span>\n              </div>\n            </div>\n\n            <div className=\"mb-2 flex items-center gap-3\">\n              <div className=\"flex items-center text-sm text-gray-600 dark:text-gray-400\">\n                <MapPin className=\"mr-1 h-3.5 w-3.5 text-blue-600 dark:text-blue-400\" />\n                <span>{location}</span>\n              </div>\n              <div className=\"text-xs text-gray-500 dark:text-gray-400\">\n                • {distanceFromCenter}\n              </div>\n            </div>\n\n            <p className=\"mt-1 line-clamp-2 text-sm text-gray-600 dark:text-gray-400\">\n              {description}\n            </p>\n          </div>\n\n          {/* Limited deal banner */}\n          {limitedDeal && (\n            <div className=\"mb-4 overflow-hidden rounded-lg bg-gradient-to-r from-blue-50 via-sky-50 to-blue-50 p-0.5 shadow-sm dark:from-blue-900/40 dark:via-blue-800/40 dark:to-blue-900/40\">\n              <div className=\"relative overflow-hidden rounded-md bg-white px-3 py-2 dark:bg-gray-800\">\n                {/* Animated background */}\n                <div\n                  className=\"absolute inset-0 bg-gradient-to-r from-transparent via-blue-100/50 to-transparent dark:via-blue-700/20\"\n                  style={{ animation: \"shimmer 3s infinite\" }}\n                ></div>\n\n                <div className=\"relative flex items-center\">\n                  <div className=\"mr-2 rounded-full bg-blue-100 p-1 dark:bg-blue-800\">\n                    <Shield className=\"h-4 w-4 text-blue-600 dark:text-blue-400\" />\n                  </div>\n                  <div>\n                    <span className=\"text-sm font-medium text-blue-800 dark:text-blue-300\">\n                      Limited deal!\n                    </span>\n                    <div className=\"flex items-center\">\n                      <span className=\"mr-1.5 inline-block h-2 w-2 animate-pulse rounded-full bg-amber-500\"></span>\n                      <span className=\"text-xs font-medium text-blue-700 dark:text-blue-400\">\n                        Only {roomsAtCurrentPrice} rooms at this price remaining\n                      </span>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          )}\n\n          {/* Amenities and special offers */}\n          <div className=\"mb-5 grid grid-cols-2 gap-4\">\n            <div>\n              <p className=\"mb-1 text-xs font-semibold text-gray-700 dark:text-gray-300\">\n                AMENITIES\n              </p>\n              <ul className=\"space-y-0.5\">\n                {amenities.map((amenity, index) => (\n                  <li key={index} className=\"flex items-center text-sm\">\n                    <svg\n                      className=\"mr-1.5 h-4 w-4 shrink-0 text-blue-600\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      viewBox=\"0 0 24 24\"\n                    >\n                      <path\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"2\"\n                        d=\"M5 13l4 4L19 7\"\n                      />\n                    </svg>\n                    <span className=\"text-gray-700 dark:text-gray-300\">\n                      {amenity}\n                    </span>\n                  </li>\n                ))}\n              </ul>\n            </div>\n            <div>\n              <p className=\"mb-1 text-xs font-semibold text-gray-700 dark:text-gray-300\">\n                SPECIAL OFFERS\n              </p>\n              <ul className=\"space-y-0.5\">\n                {specialOffers.map((offer, index) => (\n                  <li key={index} className=\"flex items-center text-sm\">\n                    <svg\n                      className={`mr-1.5 h-4 w-4 shrink-0 ${\n                        offer.toLowerCase().includes(\"free\")\n                          ? \"text-teal-600\"\n                          : \"text-teal-600\"\n                      }`}\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      viewBox=\"0 0 24 24\"\n                    >\n                      <path\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"2\"\n                        d=\"M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z\"\n                      />\n                    </svg>\n                    <span\n                      className={`${\n                        offer.toLowerCase().includes(\"free\")\n                          ? \"font-medium text-teal-700 dark:text-teal-400\"\n                          : \"text-gray-700 dark:text-gray-300\"\n                      }`}\n                    >\n                      {offer}\n                    </span>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          </div>\n        </div>\n\n        {/* Bottom section with price, availability and buttons */}\n        <div className=\"flex flex-col justify-between gap-3 sm:flex-row sm:items-end\">\n          <div>\n            <div className=\"mb-1 flex items-center text-sm text-gray-600 dark:text-gray-400\">\n              <Calendar className=\"mr-1.5 h-4 w-4 text-blue-600\" />\n              <span>Check availability</span>\n            </div>\n            {isLowAvailability ? (\n              <p className=\"text-xs font-medium text-amber-600 dark:text-amber-400\">\n                <Users className=\"mr-1 inline h-3 w-3\" />\n                <span className=\"mr-1 inline-block h-2 w-2 animate-pulse rounded-full bg-amber-500\"></span>\n                Only {availableRooms} rooms left\n              </p>\n            ) : (\n              <p className=\"text-xs font-medium text-teal-600 dark:text-teal-400\">\n                <Users className=\"mr-1 inline h-3 w-3\" />\n                <span className=\"mr-1 inline-block h-2 w-2 rounded-full bg-teal-500\"></span>\n                {availableRooms} rooms available\n              </p>\n            )}\n          </div>\n\n          <div className=\"flex items-center justify-between sm:flex-col sm:items-end\">\n            {hasDiscount ? (\n              <div>\n                <p className=\"mb-0.5 text-xs text-gray-500 dark:text-gray-400\">\n                  Price per night\n                </p>\n                <PriceFormat_Sale\n                  originalPrice={originalPricePerNight}\n                  salePrice={pricePerNight}\n                  prefix={currencyPrefix}\n                  classNameOriginalPrice=\"text-sm text-gray-500 dark:text-gray-400\"\n                  classNameSalePrice=\"text-xl font-bold text-blue-700 dark:text-blue-400\"\n                  showSavePercentage={false}\n                />\n              </div>\n            ) : (\n              <div>\n                <p className=\"mb-0.5 text-xs text-gray-500 dark:text-gray-400\">\n                  Price per night\n                </p>\n                <span className=\"text-xl font-bold text-blue-700 dark:text-blue-400\">\n                  {currencyPrefix}\n                  {pricePerNight.toFixed(2)}\n                </span>\n              </div>\n            )}\n\n            {/* Action buttons */}\n            <div className=\"mt-3 flex space-x-2\">\n              <Button\n                variant=\"outline\"\n                onClick={onViewDetails}\n                className=\"border-gray-300 bg-white text-gray-700 hover:border-blue-500 hover:bg-blue-50 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:hover:border-blue-600 dark:hover:bg-blue-950/30\"\n              >\n                View details\n              </Button>\n              <Button\n                onClick={onBookNow}\n                className=\"bg-blue-700 text-white hover:bg-blue-800 dark:bg-blue-700 dark:hover:bg-blue-600\"\n              >\n                Book now — {currencyPrefix}\n                {pricePerNight}\n              </Button>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      {/* Add animation for limited deal banner */}\n      <style jsx global>{`\n        @keyframes shimmer {\n          0% {\n            transform: translateX(-100%);\n          }\n          100% {\n            transform: translateX(100%);\n          }\n        }\n      `}</style>\n    </div>\n  );\n}\n\nexport default ProductCard_13;\nexport type { ProductCard_13Props };\n",
      "path": "/components/commerce-ui/blocks/product-card/product-card-13.tsx",
      "target": "components/commerce-ui/product-card-13.tsx"
    }
  ]
}