import React, { useState, useEffect } from 'react';

interface Product {
  id: string;
  name: string;
  price: string;
  imageSrc: string;
}

interface ProductCatalogState {
  products: Product[];
  loading: boolean;
  error: any;
}

interface ProductCatalogProps {
  onProductsLoaded?: (products: Product[]) => void;
}

export const ProductCatalog: React.FC<ProductCatalogProps> = ({ onProductsLoaded }) => {
  const [state, setState] = useState<ProductCatalogState>({
    products: [],
    loading: false,
    error: null,
  });

  useEffect(() => {
    // Initialize or fetch products
    setState(prev => ({ ...prev, loading: false }));
  }, []);

  return (
    <div className="product-catalog">
      {state.loading && <div>Loading...</div>}
      {state.error && <div>Error: {state.error}</div>}
      <div className="products">
        {state.products.map(product => (
          <div key={product.id} className="product-item">
            <h3>{product.name}</h3>
            <p>{product.price}</p>
          </div>
        ))}
      </div>
    </div>
  );
};

export default ProductCatalog;
