
import { useEffect } from "react";

interface ImagePreloaderProps {
  images: string[];
  priority?: boolean;
}

const ImagePreloader = ({ images, priority = false }: ImagePreloaderProps) => {
  useEffect(() => {
    if (!images || images.length === 0) return;

    const preloadImages = () => {
      images.forEach((src) => {
        if (!src) return;
        
        const img = new Image();
        img.src = src;
        
        // Set priority for critical images
        if (priority) {
          img.fetchPriority = "high";
        }
        
        // Optional: Add error handling
        img.onerror = () => {
          console.warn(`Failed to preload image: ${src}`);
        };
      });
    };

    // Preload images after a short delay to not block initial render
    const timer = setTimeout(preloadImages, priority ? 0 : 100);
    
    return () => clearTimeout(timer);
  }, [images, priority]);

  // This component doesn't render anything visible
  return null;
};

export default ImagePreloader;
