import { ItemCard } from "@/components/item-card";
import { Skeleton } from "@/components/ui/skeleton";

interface ItemGridItem {
  id: string;
  title: string;
  brand: string | null;
  price: number;
  original_retail: number | null;
  condition: string;
  thumbnail_url: string | null;
  store: { id: string; name: string | null };
  store_average_rating?: number | null;
  store_review_count?: number | null;
}

interface ItemGridProps {
  items: ItemGridItem[];
  isLoading?: boolean;
  skeletonCount?: number;
}

export function ItemGrid({ items, isLoading = false, skeletonCount = 8 }: ItemGridProps) {
  if (isLoading) {
    return (
      <div className="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4">
        {Array.from({ length: skeletonCount }).map((_, i) => (
          <div key={i} className="space-y-2">
            <Skeleton className="aspect-square w-full rounded-sm" />
            <Skeleton className="h-4 w-3/4" />
            <Skeleton className="h-4 w-1/2" />
          </div>
        ))}
      </div>
    );
  }

  return (
    <div className="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4">
      {items.map((item) => (
        <ItemCard
          key={item.id}
          item={{
            id: item.id,
            title: item.title,
            brand: item.brand ?? "",
            price: item.price,
            originalRetail: item.original_retail ?? undefined,
            condition: item.condition,
            storeName: item.store.name ?? "",
            imageUrl: item.thumbnail_url ?? "",
            storeAverageRating: item.store_average_rating,
            storeReviewCount: item.store_review_count,
          }}
        />
      ))}
    </div>
  );
}