import { RentalCard } from './RentalCard';
import type { RentalListing } from '../../types/rental';

interface RentalGridProps {
  rentals: RentalListing[];
  title?: string;
}

export function RentalGrid({ rentals, title }: RentalGridProps) {
  return (
    <section>
      {title && (
        <div className="flex items-center justify-between mb-4">
          <h2 className="text-xl font-bold text-gray-900">{title}</h2>
        </div>
      )}
      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
        {rentals.map(rental => (
          <RentalCard key={rental.id} rental={rental} />
        ))}
      </div>
    </section>
  );
}
