import { useState } from "react";


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

  const zoomIn = () => setScale((prev) => Math.min(prev + 0.2, 3));
  const zoomOut = () => setScale((prev) => Math.max(prev - 0.2, 0.4));
  const resetAll = () => {
    setRotation(0);
    setScale(1);
  };

  return (
    <>
      <div className="d-flex justify-content-start gap-3 mb-2">
        <i
          className="bx bx-rotate-right cursor-pointer fs-4"
          title="Rotate"
          onClick={() => setRotation((prev) => prev + 90)}
        ></i>

        <i
          className="bx bx-zoom-in cursor-pointer fs-4"
          title="Zoom In"
          onClick={zoomIn}
        ></i>

        <i
          className="bx bx-zoom-out cursor-pointer fs-4"
          title="Zoom Out"
          onClick={zoomOut}
        ></i>
      </div>

      <div
        className="position-relative d-flex flex-column justify-content-center align-items-center overflow-hidden"
        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) scale(${scale})`,
              transition: "transform 0.3s ease",
              cursor: "grab",
            }}
            onLoad={() => setLoading(false)}
          />
        </div>

        <div className="position-absolute bottom-0 start-0 m-2">
          <button
            className="btn btn-outline-secondary"
            onClick={resetAll}
          >
            <i className="bx bx-reset"></i> Reset
          </button>
        </div>
      </div>
    </>
  );
};



export default PreviewDocument;