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

interface BundleProduct {
  id: number;
  variantId: number;
  name: string;
  brandName: string;
  image: string;
  volume: string;
  volumeMl: number;
  productStock: number;
}

interface BundleImageGridProps {
  bundleId: number;
  className?: string;
  containerClassName?: string;
}

const BundleImageGrid: React.FC<BundleImageGridProps> = ({
  bundleId,
  className = 'w-32 h-46',
  containerClassName = '',
}) => {
  const [products, setProducts] = useState<BundleProduct[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchBundleProducts = async () => {
      try {
        const response = await fetch(`/api/bundle-items/${bundleId}`);
        if (response.ok) {
          const data = await response.json();
          setProducts(data);
        }
      } catch (error) {
      } finally {
        setLoading(false);
      }
    };

    fetchBundleProducts();
  }, [bundleId]);

  if (loading) {
    return (
      <div className={`${className} bg-luxury-dark/50 rounded-lg overflow-hidden flex items-center justify-center border border-luxury-gold/20 ${containerClassName}`}>
        <div className="w-4 h-4 border-2 border-luxury-gold border-t-transparent rounded-full animate-spin" />
      </div>
    );
  }

  return (
    <div className={`${className} bg-luxury-dark/50 rounded-lg overflow-hidden border border-luxury-gold/20 ${containerClassName}`}>
      <div className="grid grid-cols-3 grid-rows-2 gap-0 p-1 h-full">
        {products.slice(0, 6).map((product, idx) => (
          <div key={idx} className="relative bg-black/30 overflow-hidden flex items-center justify-center">
            <img
              src={product.image}
              alt={product.name}
              className="w-full h-full object-cover"
              onError={(e) => {
                (e.target as HTMLImageElement).src = '/images/logo.png';
              }}
            />
          </div>
        ))}
      </div>
    </div>
  );
};

export default BundleImageGrid;