import { useState, useCallback } from 'react';

export interface CatalogItem {
  id: string;
  name: string;
  price: string;
  imageSrc: string;
  imageAlt?: string;
  category?: string;
}

export const useProductCatalog = () => {
  const [items, setItems] = useState<CatalogItem[]>([]);
  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);

  const filteredItems = selectedCategory
    ? items.filter(item => item.category === selectedCategory)
    : items;

  const loadCatalog = useCallback(async () => {
    try {
      // Simulate API call
      await new Promise(resolve => setTimeout(resolve, 1000));
      setItems([
        { id: '1', name: 'Product 1', price: '$99', imageSrc: '/placeholder.jpg', category: 'featured' },
        { id: '2', name: 'Product 2', price: '$149', imageSrc: '/placeholder.jpg', category: 'new' },
      ]);
    } catch (error) {
      console.error('Failed to load catalog:', error);
    }
  }, []);

  return {
    items: filteredItems,
    loadCatalog,
    selectedCategory,
    setSelectedCategory,
  };
};
