"use client";

import React from 'react';
import dynamic from 'next/dynamic';
import { BoletaPDF, type BoletaData } from './BoletaPDF';

// Importamos PDFViewer dinámicamente para evitar errores de SSR
const PDFViewer = dynamic(
  () => import('@react-pdf/renderer').then((mod) => mod.PDFViewer),
  {
    ssr: false,
    loading: () => <div className="p-10 text-center">Cargando visualizador de PDF...</div>,
  }
);

interface BoletaPreviewProps {
  boleta: BoletaData;
}

const BoletaPreview: React.FC<BoletaPreviewProps> = ({ boleta }) => {
  return (
    <div className="w-full h-[800px] bg-gray-100 rounded-lg overflow-hidden shadow-lg">
      <PDFViewer style={{ width: '100%', height: '100%', border: 'none' }} showToolbar={true}>
        <BoletaPDF boleta={boleta} />
      </PDFViewer>
    </div>
  );
};

export default BoletaPreview;