app/components/PdfViewer.js

"use client";

export default function PdfViewer({ pdfUrl, pageNumber }) {
    if (!pdfUrl) {
        return (
            <div className="pdf-placeholder">
                <p>No PDF available for this document.</p>
            </div>
        );
    }

    // PDF pages in our data are 0-indexed; PDF.js viewer expects 1-indexed pages
    const viewerPage = (pageNumber ?? 0) + 1;

    // Use Mozilla's hosted PDF.js viewer — supports #page=N for direct page navigation.
    // This avoids X-Frame-Options restrictions from the source server.
    const pdfJsViewerUrl = `https://mozilla.github.io/pdf.js/web/viewer.html?file=${encodeURIComponent(pdfUrl)}#page=${viewerPage}`;

    return (
        <iframe
            key={`pdf-${pdfUrl}-page-${viewerPage}`}
            src={pdfJsViewerUrl}
            className="pdf-frame"
            title={`PDF Page ${viewerPage}`}
            allow="fullscreen"
        />
    );
}