import { formatAmount } from "@/lib/format"
import { Table, TableBody, TableCell, TableFooter, TableRow } from "@/components/ui/table"

export interface ReportSectionLine {
  label: React.ReactNode
  amount: number
}

interface ReportSectionProps {
  title: string
  lines: ReportSectionLine[]
  /** Omit to hide the total row entirely (e.g. a single-line section that would just repeat itself). */
  total?: number
}

/** One bordered statement section: its lines, then an optional bold total row. Renders nothing when there are no lines. */
export function ReportSection({ title, lines, total }: ReportSectionProps) {
  if (lines.length === 0) return null
  return (
    <div className="mb-4 rounded-lg border p-4">
      <p className="mb-2 text-sm font-semibold tracking-wide text-muted-foreground uppercase">{title}</p>
      <Table className="text-base">
        <TableBody>
          {lines.map((line, i) => (
            <TableRow key={i} className="border-0 hover:bg-transparent">
              <TableCell className="px-0 py-1.5">{line.label}</TableCell>
              <TableCell className="px-0 py-1.5 text-right tabular-nums">{formatAmount(line.amount)}</TableCell>
            </TableRow>
          ))}
        </TableBody>
        {total !== undefined && (
          <TableFooter className="border-t bg-transparent">
            <TableRow className="hover:bg-transparent">
              <TableCell className="px-0 py-2 font-semibold">Total {title}</TableCell>
              <TableCell className="px-0 py-2 text-right font-semibold tabular-nums">{formatAmount(total)}</TableCell>
            </TableRow>
          </TableFooter>
        )}
      </Table>
    </div>
  )
}
