// Shared print-statement layout — Task 4 of the AR plan (docs/superpowers/
// plans/2026-07-31-ar.md), binding detail in docs/superpowers/specs/
// 2026-07-31-ar-design.md's "Statement print views" section. Provides the
// letterhead header (company name, report title, period line, a subtle
// "Generated <date>" line) and footer that both PrintPnl.tsx and
// PrintBalanceSheet.tsx wrap around their own section markup, so the two
// print views share one visual identity. Pure presentation — no fetching,
// no routing; see styles.css's "Statement print views" section for the
// on-screen vs. @media print styling.

import type { ReactNode } from "react";

export function StatementPrint({
  companyName,
  title,
  periodLine,
  generatedAt,
  children,
}: {
  companyName: string;
  title: string;
  periodLine: string;
  generatedAt: string;
  children: ReactNode;
}) {
  return (
    <div className="statement">
      <header className="statement-head">
        <div className="statement-company">{companyName}</div>
        <div className="statement-title">{title}</div>
        <div className="statement-period">{periodLine}</div>
        <div className="statement-generated">Generated {generatedAt}</div>
      </header>

      <div className="statement-body">{children}</div>

      <footer className="statement-footer">
        Prepared from the live ledger — every figure traces to journal entries.
      </footer>
    </div>
  );
}
