import React from 'react';
import { Product } from '@/types/woocommerce';
import { ProductHoverTagsSettings } from '@/lib/settings';
import ProductCard from './ProductCard';

interface ProductGridProps {
  products: Product[];
  className?: string;
  isNew?: boolean;
  badgeText?: string;
  hideBadge?: boolean;
  desktopCols?: number; // accepted for compatibility; CSS .grid handles layout
  mobileCols?: number; // accepted for compatibility; CSS .grid handles layout
  hoverTags?: ProductHoverTagsSettings;
}

export default function ProductGrid({
  products,
  className = 'grid',
  isNew,
  badgeText,
  hideBadge,
  hoverTags,
}: ProductGridProps) {
  if (products.length === 0) {
    return (
      <div style={{ textAlign: 'center', padding: '64px 20px', border: '1.5px dashed var(--line)', borderRadius: 'var(--r-lg)' }}>
        <h2 style={{ margin: '0 0 8px', fontWeight: 500, fontSize: '26px' }}>No products found</h2>
        <p style={{ margin: '0 auto', color: 'var(--muted)' }}>Try selecting a different filter or search term.</p>
      </div>
    );
  }

  return (
    <div className={className}>
      {products.map((p, idx) => (
        <ProductCard
          key={p.id}
          product={p}
          isNew={isNew}
          badgeText={badgeText}
          hideBadge={hideBadge}
          index={idx}
          hoverTags={hoverTags}
        />
      ))}
    </div>
  );
}