client/src/components/product/product-grid.tsx

import { Product } from "@/types";
import ProductCard from "./product-card";

interface ProductGridProps {
  products: Product[];
}

export default function ProductGrid({ products }: ProductGridProps) {
  // Ensure products is an array
  const productList = Array.isArray(products) ? products : [];
  
  if (productList.length === 0) {
    return (
      <div className="text-center py-6" data-testid="no-products">
        <p className="text-gray-500">No products found.</p>
      </div>
    );
  }

  return (
    <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-4 xl:grid-cols-5 gap-2 sm:gap-3 md:gap-4" data-testid="product-grid">
      {productList.map((product) => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}