import { ListingCard } from './ListingCard';
import type { Listing } from '../../types';

interface ListingGridProps {
  listings: Listing[];
  title?: string;
  showViewAll?: boolean;
}

export function ListingGrid({ listings, title, showViewAll }: ListingGridProps) {
  return (
    <section>
      {title && (
        <div className="flex items-center justify-between mb-4">
          <h2 className="text-xl font-bold text-gray-900">{title}</h2>
          {showViewAll && (
            <button className="text-sm font-medium text-primary-600 hover:text-primary-700 transition-colors cursor-pointer">
              View All &gt;
            </button>
          )}
        </div>
      )}
      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
        {listings.map(listing => (
          <ListingCard key={listing.id} listing={listing} />
        ))}
      </div>
    </section>
  );
}
