import React from "react";
import { CloseOutlined } from '@ant-design/icons';

const PdfView = ({ visible, title, onClose, url, fileId }) => {
  if (!visible) return null;

  return (
    <div style={{
      position: 'fixed',
      top: 0,
      left: 0,
      width: '100vw',
      height: '100vh',
      backgroundColor: 'rgba(0, 0, 0, 0.5)',
      zIndex: 2000,
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center'
    }}>
      <div style={{ width: '60%', height: '80vh', display: 'flex', flexDirection: 'column', position: 'relative' }}>
        <CloseOutlined 
          onClick={onClose} 
          style={{ 
            position: 'absolute',
            top: '-30px',
            right: 0,
            color: '#fff', 
            fontSize: '18px', 
            cursor: 'pointer' 
          }} 
        />
        <iframe
          style={{
            height: '100%',
            width: '100%',
            border: 0,
            background: '#fff'
          }}
          src={`${process.env.PUBLIC_URL}/static/pdf/web/viewer.html?file=${encodeURIComponent(url + fileId)}`}
          title={title}
        />
      </div>
    </div>
  )
}
export default PdfView