import styles from '../ContentPreview.module.css';

interface ImageRendererProps {
  previewUrl: string;
  fileName: string;
  onError: () => void;
}

export function ImageRenderer({ previewUrl, fileName, onError }: ImageRendererProps) {
  const handleLoad = () => {
    console.log('🖼️ Image loaded successfully:', { previewUrl, fileName });
  };

  const handleError = (event: React.SyntheticEvent<HTMLImageElement, Event>) => {
    console.error('❌ Image failed to load:', { previewUrl, fileName, event });
    onError();
  };

  console.log('🔍 ImageRenderer props:', {
    previewUrl,
    fileName,
    hasPreviewUrl: !!previewUrl
  });

  return (
    <img 
      src={previewUrl} 
      alt={fileName}
      className={styles.previewImage}
      onLoad={handleLoad}
      onError={handleError}
    />
  );
}

