Report sheet

"use client"

import { ReportSection, ReportSheet } from "@/components/report-sheet"
import { ComparisonView } from "@/components/comparison-view"
import { KpiRow } from "@/components/stat-card"

const ago = (hours: number) => new Date(Date.now() - hours * 3_600_000).toISOString()

export default function Example() {
  return (
    <ReportSheet
      className="max-w-3xl"
      title="Release readiness: 4.2"
      scope="Acme Production"
      period="Changes since the 4.1 release"
      generatedAt={ago(0)}
      generatedBy="Keel"
      dataReadAt={ago(3)}
      onExport={() => {}}
    >
      <ReportSection number={1} title="Summary" lede="From last night’s CI run and the 4.1 release.">
        <KpiRow
          kpis={[
            { label: "Changes in the release", value: 62, delta: { value: 18, vs: "4.1 release", good: "down" } },
            { label: "Failing tests", value: 6, delta: { value: -4, vs: "last week", good: "down" } },
            { label: "Users affected", value: null, missing: "Needs session analytics, which isn’t connected." },
          ]}
        />
      </ReportSection>
      <ReportSection number={2} title="Before and after" lede="This release against 4.1.">
        <ComparisonView
          before="4.1"
          after="4.2"
          rows={[
            { label: "Test coverage", before: 0.72, after: 0.78, format: "percent", good: "up" },
            { label: "Failing tests", before: 10, after: 6, good: "down" },
          ]}
        />
      </ReportSection>
    </ReportSheet>
  )
}