// components/PdfViewer.tsx
"use client";
import { useState } from 'react';
import { Document, Page, pdfjs } from 'react-pdf';
import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
import 'react-pdf/dist/esm/Page/TextLayer.css';

// Configure PDF worker
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;

export default function PdfViewer({ url }: { url: string }) {
  const [numPages, setNumPages] = useState<number | null>(null);
  const [pageNumber, setPageNumber] = useState(1);

  function onDocumentLoadSuccess({ numPages }: { numPages: number }) {
    setNumPages(numPages);
    setPageNumber(1);
  }

  return (
    <div className="w-full h-[500px] overflow-auto border">
      <div className="flex justify-center mb-2">
        <button 
          disabled={pageNumber <= 1} 
          onClick={() => setPageNumber(prev => prev - 1)}
          className="px-3 py-1 mr-2 bg-gray-200 rounded disabled:opacity-50"
        >
          Previous
        </button>
        <span className="mx-2">
          Page {pageNumber} of {numPages}
        </span>
        <button 
          disabled={numPages !== null && pageNumber >= numPages} 
          onClick={() => setPageNumber(prev => prev + 1)}
          className="px-3 py-1 bg-gray-200 rounded disabled:opacity-50"
        >
          Next
        </button>
      </div>
      
      <Document
        file={url}
        onLoadSuccess={onDocumentLoadSuccess}
        className="w-full"
      >
        <Page 
          pageNumber={pageNumber} 
          width={800} 
          renderTextLayer={false}
        />
      </Document>
    </div>
  );
}