"use client"; import { Star, Heart } from "lucide-react"; import { Badge } from "@/components/ui/badge"; import Image from "next/image"; import { cn } from "@/lib/utils"; import { useState } from "react"; export interface ListingProps { id: string; title: string; location: string; host: string; images: string[]; rating: number; reviewCount: number; price: number; perNight: boolean; dates: string; isSuperhost?: boolean; isNew?: boolean; category?: string; } export function AirbnbListingCard({ title, location, host, images, rating, reviewCount, price, perNight = true, dates, isSuperhost = false, isNew = false, category, }: ListingProps) { const [currentImageIndex, setCurrentImageIndex] = useState(0); const [isFavorite, setIsFavorite] = useState(false); const [touchStartX, setTouchStartX] = useState(0); const [touchEndX, setTouchEndX] = useState(0); // Handle next image navigation const nextImage = () => { setCurrentImageIndex((prev) => (prev + 1) % images.length); }; // Handle previous image navigation const prevImage = () => { setCurrentImageIndex((prev) => (prev - 1 + images.length) % images.length); }; // Touch event handlers for mobile swipe const handleTouchStart = (e: React.TouchEvent) => { setTouchStartX(e.touches[0].clientX); setTouchEndX(e.touches[0].clientX); }; const handleTouchMove = (e: React.TouchEvent) => { setTouchEndX(e.touches[0].clientX); }; const handleTouchEnd = () => { if (!touchStartX || !touchEndX) return; const distance = touchStartX - touchEndX; const swipeThreshold = 50; // Minimum swipe distance in pixels if (Math.abs(distance) < swipeThreshold) return; if (distance > 0) { nextImage(); // Swipe left } else { prevImage(); // Swipe right } }; return (

{/* Image carousel container with sliding animation */}

{images.map((image, index) => (

))}

{images.length > 1 && ( <> {/* Navigation buttons */} {/* Image position indicators */}

{images.map((_, index) => (

))}

)} {/* Favorite button */} {/* Badges for superhost/new listing */} {(isSuperhost || isNew) && (

{isSuperhost && ( Superhost )} {isNew && ( New )}

)}

{/* Listing details */}

{location}

{rating} {reviewCount > 0 && ( ({reviewCount}) )}

{category ? `${category} • ` : ""}Hosted by {host}

{dates}

${price} {perNight && ( night )}

); }

Airbnb Card

Malibu, California

Install Dependencies