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

export interface ProductDetail {
  id: string;
  name: string;
  price: string;
  description: string;
  imageSrc: string;
  imageAlt?: string;
  specs?: Record<string, string>;
}

export const useProductDetail = (id: string) => {
  const [product, setProduct] = useState<ProductDetail | null>(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const loadProduct = async () => {
      setIsLoading(true);
      try {
        // Simulate API call
        await new Promise(resolve => setTimeout(resolve, 500));
        setProduct({
          id,
          name: 'Product',
          price: '$99',
          description: 'High quality product',
          imageSrc: '/placeholder.jpg',
        });
      } catch (err) {
        setError('Failed to load product');
      } finally {
        setIsLoading(false);
      }
    };

    loadProduct();
  }, [id]);

  return { product, isLoading, error };
};
