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

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

interface SellerProductGridProps {
  products: Product[];
}

export default function SellerProductGrid({ products }: SellerProductGridProps) {
  // 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-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 sm:gap-5 md:gap-6" data-testid="seller-product-grid">
      {productList.map((product) => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}