import React from 'react';
import { getPreviewUrl } from '../api/fileApi';

function FilePreview({ file, onClose }) {
  if (!file) return null;

  const previewUrl = getPreviewUrl(file.id);

  return (
    <div className="preview-overlay" onClick={onClose}>
      <div className="preview-modal" onClick={e => e.stopPropagation()}>
        <div className="preview-header">
          <span>{file.fileName}</span>
          <button onClick={onClose}>Close</button>
        </div>
        {/* Browsers with a built-in PDF viewer will render this inline */}
        <object data={previewUrl} type="application/pdf" className="preview-object">
          <p>
            Your browser can't display PDFs inline.{' '}
            <a href={previewUrl} target="_blank" rel="noopener noreferrer">
              Open the PDF in a new tab
            </a>
            .
          </p>
        </object>
      </div>
    </div>
  );
}

export default FilePreview;
