import ProductCard, { ProductCardData } from "./ProductCard";
import { cn } from "@/lib/utils";

interface ProductGridProps {
  products: ProductCardData[];
  className?: string;
  cols?: 2 | 3 | 4 | 5;
}

export default function ProductGrid({ products, className, cols = 4 }: ProductGridProps) {
  const colsClass = {
    2: "grid-cols-2",
    3: "grid-cols-2 sm:grid-cols-3",
    4: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4",
    5: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5",
  }[cols];

  if (products.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center py-20 text-center">
        <span className="text-5xl mb-4">🔍</span>
        <h3 className="text-xl font-bold text-slate-700 mb-2">No products found</h3>
        <p className="text-slate-500">Try adjusting your filters or search query</p>
      </div>
    );
  }

  return (
    <div className={cn(`grid gap-4`, colsClass, className)}>
      {products.map((product) => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}