import { useState } from 'react';

const PreviewDocument = ({ imageUrl }) => {
  const [loading, setLoading] = useState(true);

  return (
    <div className="d-flex justify-content-center align-items-center" style={{ minHeight: "50vh" }}>
      {loading && (
        <div className="text-secondary text-center mb-2">
          Loading...
        </div>
      )}
      <img
        src={imageUrl}
        alt="Full View"
        className="img-fluid"
        style={{
          maxHeight: "100vh",
          objectFit: "contain",
          display: loading ? "none" : "block",
        }}
        onLoad={() => setLoading(false)}
      />
    </div>
  );
};

export default PreviewDocument;
