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

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

export function HtmlRenderer({ previewUrl, fileName, onError }: HtmlRendererProps) {
  const handleLoad = () => {
    console.log('🌐 HTML loaded successfully:', { previewUrl, fileName });
  };

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

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

  return (
    <iframe
      src={previewUrl}
      className={styles.previewIframe}
      title={`Preview of ${fileName}`}
      data-mime-type="text/html"
      onLoad={handleLoad}
      onError={handleError}
      style={{ 
        background: 'white !important',
        border: 'none',
        width: '100%',
        height: '100%'
      }}
    />
  );
}