All you need to make things happen

import { Calendar, MapPin, Users, Star } from "lucide-react";
import { Property } from "@/types/property";

interface PropertyCardProps {
  property: Property;
  onBook?: (id: string) => void;
}

export function PropertyCard({ property, onBook }: PropertyCardProps) {
  return (
    <div className="rounded-lg border overflow-hidden hover:shadow-lg transition-shadow">
      <div className="relative h-64 bg-gray-200">
        <img 
          src={property.imageUrl} 
          alt={property.title}
          className="w-full h-full object-cover"
        />
        <div className="absolute top-4 right-4 bg-white/90 px-2 py-1 rounded-md text-sm font-semibold">
          {`${property.pricePerNight}/night`}
        </div>
      </div>
      
      <div className="p-4 space-y-3">
        <div className="flex items-start justify-between">
          <div>
            <h3 className="font-semibold text-lg">{property.title}</h3>
            <div className="flex items-center gap-1 text-sm text-gray-600 mt-1">
              <MapPin className="h-4 w-4" />
              <span>{property.location}</span>
            </div>
          </div>
          <div className="flex items-center gap-1">
            <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
            <span className="text-sm font-medium">{property.rating}</span>
          </div>
        </div>
        
        <div className="flex items-center gap-4 text-sm text-gray-600">
          <div className="flex items-center gap-1">
            <Users className="h-4 w-4" />
            <span>{property.guests} guests</span>
          </div>
          <div className="flex items-center gap-1">
            <Calendar className="h-4 w-4" />
            <span>{property.bedrooms} bedrooms</span>
          </div>
        </div>
        
        {onBook && (
          <button
            onClick={() => onBook(property.id)}
            className="w-full bg-primary text-primary-foreground py-2 rounded-md hover:bg-primary/90 transition-colors"
          >
            Book now
          </button>
        )}
      </div>
    </div>
  );
}