import { View, Text } from '@react-pdf/renderer';

import type { makeReportStyles } from './styles';

interface ReportTableProps {
  styles: ReturnType<typeof makeReportStyles>;
  headers: string[];
  /** Percentage widths per column. Must sum to 100; 1px slack is fine. */
  widths: number[];
  rows: string[][];
}

/**
 * Shared zebra-striped table primitive used by every list-style
 * report kind. Header row is gray-100; even rows are white; odd rows
 * tinted #fafafa so scanning a 50-row page doesn't lose the eye-line.
 *
 * The component is intentionally untyped beyond strings - every
 * report component formats numbers / dates / currencies to strings
 * before passing rows in. Keeps the table primitive deliberately
 * dumb (no formatting decisions live here).
 */
export function ReportTable({ styles, headers, widths, rows }: ReportTableProps) {
  return (
    <View style={styles.table}>
      {/* `minPresenceAhead` reserves space for at least ~60pt of rows
          below the header before allowing the header itself to render
          on a page. Without it, the table header could land at the very
          bottom of a page with the first row pushed to the next - same
          orphan problem the dashboard sections used to have. */}
      <View style={styles.tableHeader} minPresenceAhead={60}>
        {headers.map((header, i) => (
          <Text key={`h-${i}`} style={{ ...styles.tableHeaderCell, width: `${widths[i]}%` }}>
            {header}
          </Text>
        ))}
      </View>
      {rows.map((row, rowIdx) => (
        <View
          key={`r-${rowIdx}`}
          style={rowIdx % 2 === 1 ? styles.tableRowZebra : styles.tableRow}
          wrap={false}
        >
          {row.map((cell, i) => (
            <Text key={`c-${rowIdx}-${i}`} style={{ ...styles.tableCell, width: `${widths[i]}%` }}>
              {cell}
            </Text>
          ))}
        </View>
      ))}
    </View>
  );
}
