import { Product } from '../api'
import EmptyState from './EmptyState'
import ProductCard from './ProductCard'

interface Props {
  products: Product[]
  emptyMessage?: string
  onReset?: () => void
}

export default function ProductGrid({
  products,
  emptyMessage = 'Aucun produit trouvé',
  onReset,
}: Props) {
  if (products.length === 0) {
    return (
      <EmptyState message={emptyMessage}>
        {onReset && (
          <button type="button" className="btn btn-secondary" onClick={onReset}>
            Réinitialiser les filtres
          </button>
        )}
      </EmptyState>
    )
  }

  return (
    <div className="product-grid">
      {products.map((p) => (
        <ProductCard key={p.uid} product={p} />
      ))}
    </div>
  )
}