import { Product } from "@/lib/types";
import { ProductCard } from "./ProductCard";
import { EmptyState } from "./EmptyState";

export function ProductGrid({
  products,
  emptyTitle = "No products found",
  emptyDescription = "Try a different search or check back soon.",
}: {
  products: Product[];
  emptyTitle?: string;
  emptyDescription?: string;
}) {
  if (products.length === 0) {
    return <EmptyState title={emptyTitle} description={emptyDescription} />;
  }

  return (
    <div className="grid grid-cols-2 gap-x-4 gap-y-7 sm:grid-cols-3 lg:grid-cols-4">
      {products.map((p) => (
        <ProductCard key={p.id} product={p} />
      ))}
    </div>
  );
}