import React, { useState } from 'react';
import { Button } from '@/components/ui/button';
import { APP_BASE_URL } from '@/utils/constants';

const CustomPDFViewer = ({
  pdfPages ,
  currentPage , 
  onChange
} : {
  pdfPages : Array<string>
  currentPage : number
  onChange : (value : any) => void
}) => {
  // const [currentPage, setCurrentPage] = useState(0);
  
  // Your PDF pages array

  const totalPages = pdfPages?.length;

  const goToPreviousPage = () => {
    if (currentPage > 0) {
      onChange((prev : number) => prev - 1);
    }
  };

  const goToNextPage = () => {
    if (currentPage < totalPages - 1) {
      onChange((prev : number) => prev + 1);
    }
  };

  return (
    <>
      {
        pdfPages && (
        <div className="flex flex-col items-center space-y-4">
          {/* PDF Display */}
          <div className="w-full max-w-3xl border rounded-lg shadow-lg">
            <iframe
              src={APP_BASE_URL + pdfPages[currentPage]}
              className="w-full h-[800px]"
              title={`PDF Page ${currentPage + 1}`}
            />
          </div>

          {/* Navigation Controls */}
          <div className="flex items-center space-x-4">
            <Button
              onClick={goToPreviousPage}
              disabled={currentPage === 0}
              variant="outline"
            >
              Previous
            </Button>
            <span className="text-sm">
              Page {currentPage + 1} of {totalPages}
            </span>
            <Button
              onClick={goToNextPage}
              disabled={currentPage === totalPages - 1}
              variant="outline"
            >
              Next
            </Button>
          </div>
        </div>
        )
      }
    </>
  );
};

export default CustomPDFViewer;