import { useState } from "react";

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

  return (
   <>
    <div className="d-flex justify-content-start">
        <i
          className="bx bx-rotate-right cursor-pointer"
          onClick={() => setRotation((prev) => prev + 90)}
        ></i>
      </div>
    <div
      className="position-relative d-flex flex-column justify-content-center align-items-center"
      style={{ minHeight: "80vh" }}
    >
      
      {loading && (
        <div className="text-secondary text-center mb-2">Loading...</div>
      )}

      <div className="mb-3 d-flex justify-content-center align-items-center">
        <img
          src={imageUrl}
          alt="Full View"
          className="img-fluid"
          style={{
            maxHeight: "80vh",
            objectFit: "contain",
            display: loading ? "none" : "block",
            transform: `rotate(${rotation}deg)`,
            transition: "transform 0.3s ease",
          }}
          onLoad={() => setLoading(false)}
        />
      </div>

      <div className="position-absolute bottom-0 start-0 justify-content-center gap-2">
        <button
          className="btn btn-outline-secondary"
          onClick={() => setRotation(0)}
          title="Reset Rotation"
        >
          <i className="bx bx-reset"></i> Reset
        </button>
      </div>
    </div>
   </>
  );
};

export default PreviewDocument;