// One financial-statement section (INCOME / EXPENSES / ASSETS / LIABILITIES
// / EQUITY) for the print views — Task 4. Renders the section heading, its
// account rows, and a single-top-ruled subtotal row.
//
// The heading plus its first two rows are wrapped in their own
// break-inside:avoid block (styles.css's ".statement-section-lead") — the
// whole section can't get that treatment (a real company's P&L expense
// section can run to ~90 accounts, far taller than a printed page, so
// "avoid" on the full section would simply be ignored), but keeping the
// heading glued to at least its first couple of rows means a page break
// can never strand a bare section heading alone at the bottom of a page
// with nothing under it.
import { fmtMoney } from "../lib/money";

export interface StatementSectionRow {
  key: string;
  label: string;
  amount: string;
}

export function StatementSection({
  heading,
  rows,
  totalLabel,
  totalAmount,
}: {
  heading: string;
  rows: StatementSectionRow[];
  totalLabel: string;
  totalAmount: string;
}) {
  const lead = rows.slice(0, 2);
  const rest = rows.slice(2);

  return (
    <section className="statement-section">
      <div className="statement-section-lead">
        <div className="statement-section-heading">{heading}</div>
        {lead.map((row) => (
          <div className="statement-row" key={row.key}>
            <span>{row.label}</span>
            <span className="statement-row-amount">{fmtMoney(row.amount)}</span>
          </div>
        ))}
      </div>
      {rest.map((row) => (
        <div className="statement-row" key={row.key}>
          <span>{row.label}</span>
          <span className="statement-row-amount">{fmtMoney(row.amount)}</span>
        </div>
      ))}
      <div className="statement-row statement-subtotal">
        <span>{totalLabel}</span>
        <span className="statement-row-amount">{fmtMoney(totalAmount)}</span>
      </div>
    </section>
  );
}
