import type { ReactNode } from 'react';
import './blocks.css';

export interface ProductItem {
  name: string;
  description?: string;
  price?: string;
  imageUrl?: string;
  ctaLabel?: string;
  onCtaClick?: () => void;
}

export interface ProductsBlockProps {
  title?: string;
  subtitle?: string;
  products: ProductItem[];
  columns?: 2 | 3 | 4;
  variant?: 'grid' | 'list' | 'carousel';
}

export function ProductsBlock({ 
  title, 
  subtitle, 
  products, 
  columns = 3,
  variant = 'grid' 
}: ProductsBlockProps) {
  return (
    <section className={`shared-products shared-products--${variant}`}>
      {title && <h2 className="shared-products__title">{title}</h2>}
      {subtitle && <p className="shared-products__subtitle">{subtitle}</p>}
      <div className={`shared-products__grid shared-products__grid--${columns}`}>
        {products.map((product, index) => (
          <div key={index} className="shared-products__item">
            {product.imageUrl && (
              <img src={product.imageUrl} alt={product.name} className="shared-products__image" />
            )}
            <h3 className="shared-products__name">{product.name}</h3>
            {product.description && (
              <p className="shared-products__description">{product.description}</p>
            )}
            {product.price && <p className="shared-products__price">{product.price}</p>}
            {product.ctaLabel && (
              <button 
                type="button" 
                className="shared-button" 
                onClick={product.onCtaClick}
              >
                {product.ctaLabel}
              </button>
            )}
          </div>
        ))}
      </div>
    </section>
  );
}

