import { ListingCard } from './ListingCard';

interface Listing {
  id: string;
  title: string;
  description: string;
  price: number;
  currency: string;
  quantity: number;
  category: string;
  sellerName?: string;
  location?: { city?: string; region?: string };
  tags: string[];
  viewCount: number;
}

interface ListingGridProps {
  listings: Listing[];
  columns?: 2 | 3 | 4;
  variant?: 'default' | 'compact' | 'featured';
  emptyMessage?: string;
}

export function ListingGrid({
  listings,
  columns = 3,
  variant = 'default',
  emptyMessage = 'No listings found',
}: ListingGridProps) {
  if (listings.length === 0) {
    return (
      <div className="text-center py-12 bg-white rounded-lg shadow">
        <div className="text-4xl mb-4">🌿</div>
        <p className="text-gray-500">{emptyMessage}</p>
      </div>
    );
  }

  const gridCols = {
    2: 'grid-cols-1 md:grid-cols-2',
    3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
    4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
  };

  if (variant === 'compact') {
    return (
      <div className="space-y-3">
        {listings.map((listing) => (
          <ListingCard key={listing.id} listing={listing} variant="compact" />
        ))}
      </div>
    );
  }

  return (
    <div className={`grid ${gridCols[columns]} gap-6`}>
      {listings.map((listing) => (
        <ListingCard key={listing.id} listing={listing} variant={variant} />
      ))}
    </div>
  );
}

export default ListingGrid;