import React from 'react';
import type { ReportData } from '../types';
import { ReportDisplay } from './ReportDisplay';

interface PrintableReportProps {
  reports: ReportData[];
}

export const PrintableReport: React.FC<PrintableReportProps> = ({ reports }) => {
  return (
    <div 
      id="printable-report-container" 
      data-report={JSON.stringify(reports)}
      className="light bg-white text-slate-900 flex flex-col gap-[20mm]"
      style={{ width: '210mm', background: 'white' }}
    >
      {reports.map((report, idx) => (
        <div key={idx} className="report-page pdf-export bg-white" style={{ minHeight: '297mm' }}>
          <ReportDisplay report={report} />
        </div>
      ))}
    </div>
  );
};