import React from "react";
import ProductCard from "./ProductCard";

const ProductGrid = ({ products, columns = 3 }) => {
  if (!products || products.length === 0) {
    return (
      <section className="empty-state">
        <i className="fa-solid fa-box-open empty-icon"></i>
        <p>Aucun produit pour l'instant</p>
        <p className="hint">Ajoutez un lien Amazon.fr pour commencer !</p>
      </section>
    );
  }

  const gridStyle = {
    "--grid-columns": columns,
  };

  return (
    <div className="product-grid" style={gridStyle}>
      {products.map((product) => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
};

export default ProductGrid;
