'use client';

import ReportLogo from './ReportLogo';

interface ReportPageProps {
  pageNumber: number;
  totalPages: number;
  background?: 'white' | 'gray' | 'dark';
  showHeader?: boolean;
  children: React.ReactNode;
}

export default function ReportPage({
  pageNumber,
  totalPages,
  background = 'white',
  showHeader = true,
  children,
}: ReportPageProps) {
  const bgClass = background === 'gray' ? 'page-bg-gray' : background === 'dark' ? 'page-bg-dark' : 'page-bg-white';

  return (
    <div className={`page ${bgClass}`} data-report-page>
      <div className="page-content">
        {showHeader && background !== 'dark' && (
          <div className="page-header">
            <div className="page-header-logo">
              <ReportLogo variant="header" />
            </div>
            <div className="page-header-right">
              <span className="page-indicator">
                {pageNumber} / {totalPages}
              </span>
            </div>
          </div>
        )}
        <div style={{ flex: 1, minHeight: 0 }}>
          {children}
        </div>
        {background !== 'dark' && (
          <div className="page-footer">
            <ReportLogo variant="footer" />
            <span className="page-footer-text">
              Confidential — Prepared by whyrating.com
            </span>
          </div>
        )}
      </div>
    </div>
  );
}
