Untitled

import React, { useState } from "react";
import { Page } from "react-pdf";
import DrawingLayer from "./DrawingLayer";
import { useSelector } from "react-redux";

export default function PdfPageWithNotes({
  pageNumber,
  containerWidth,
  ebookId,
  onPageClick,
  scale, // optional: you can incorporate this into the width calculation if desired
}) {
  const noteTakingLayer = useSelector(state => state.ebook.noteTakingLayer);
  const [pageDimensions, setPageDimensions] = useState({ width: 0, height: 0 });

  // When the page renders at scale 1, store its intrinsic dimensions.
  const onRenderSuccess = (pdfPage) => {
    const viewport = pdfPage.getViewport({ scale: 1 });
    setPageDimensions({ width: viewport.width, height: viewport.height });
  };

  // Instead of using a fixed baseWidth, we compute the page width from the container.
  // Here we use 90% of the container width (with a minimum value for readability)
  const pageWidth = Math.max(containerWidth * 0.9, 300);
  const pageHeight = pageDimensions.width > 0
    ? (pageDimensions.height / pageDimensions.width) * pageWidth
    : "auto";

  return (
    <div
      className="relative mb-6 w-full flex justify-center"
      onClick={onPageClick}
      style={{ overflow: "hidden", width: pageWidth, height: pageHeight }}
    >
      <Page
        pageNumber={pageNumber}
        renderTextLayer={false}
        width={pageWidth}
        onRenderSuccess={onRenderSuccess}
        className="bg-white shadow-md rounded"
      />
      {noteTakingLayer && pageDimensions.width > 0 && (
        <div
          className="pointer-events-none absolute top-0 left-0"
          style={{
            width: pageWidth,
            height: pageHeight,
          }}
        >
          <DrawingLayer
            ebookId={ebookId}
            pageId={pageNumber}
            width={pageWidth}
            height={pageHeight}
          />
        </div>
      )}
    </div>
  );
}