CheckoutSummary

import * as React from "react";
import { cn } from "@/lib/ledger/cn";
import type { MoneyValue } from "@/lib/ledger/money.types";
import { Money } from "@/components/ledger/money";
import { Rule } from "@/components/ledger/rule";

export type SummaryLine = { label: string; amount: MoneyValue; note?: string };

export interface CheckoutSummaryProps extends React.ComponentPropsWithoutRef<"div"> {
  /** Itemized and named, never a lump "Fees". */
  fees?: SummaryLine[];
  items: SummaryLine[];
  roundingNote?: string;
  subtotal: MoneyValue;
  tax?: SummaryLine[];
  total: MoneyValue;
}

/**
 * Line items → subtotal (single rule) → fees → tax → total (double rule).
 * The same `Rule` grammar as the statements, which is what makes the
 * library read as one system.
 */
export const CheckoutSummary = React.forwardRef<HTMLDivElement, CheckoutSummaryProps>(
  ({ className, items, subtotal, fees = [], tax = [], total, roundingNote, ...props }, ref) => (
    <div className={cn("w-full", className)} ref={ref} {...props}>
      <table className="w-full">
        <caption className="sr-only">Order summary</caption>
        <tbody>
          {items.map((line) => (
            <Line key={line.label} {...line} />
          ))}
          <tr>
            <td />
            <td className="py-1">
              <Rule variant="subtotal" />
            </td>
          </tr>
          <Line amount={subtotal} emphasis label="Subtotal" />
          {fees.map((line) => (
            <Line key={line.label} {...line} />
          ))}
          {tax.map((line) => (
            <Line key={line.label} {...line} />
          ))}
          <tr>
            <td />
            <td className="py-1">
              <Rule variant="subtotal" />
            </td>
          </tr>
          <tr>
            <th className="py-1 text-left text-body font-medium" scope="row">
              Total
            </th>
            <td className="py-1 text-right">
              <Money accounting size="md" value={total} />
            </td>
          </tr>
          <tr>
            <td />
            <td className="pt-1">
              <Rule variant="total" />
            </td>
          </tr>
        </tbody>
      </table>
      {roundingNote ? <p className="mt-2 text-caption text-text-tertiary">† {roundingNote}</p> : null}
    </div>
  ),
);
CheckoutSummary.displayName = "CheckoutSummary";

function Line({ label, amount, note, emphasis }: SummaryLine & { emphasis?: boolean }) {
  return (
    <tr>
      <th
        className={cn(
          "py-1 pr-6 text-left text-body font-normal",
          emphasis ? "font-medium text-text-primary" : "text-text-secondary",
        )}
        scope="row"
      >
        {label}
        {note ? <span className="block text-caption text-text-tertiary">{note}</span> : null}
      </th>
      <td className="py-1 text-right align-top">
        <Money accounting value={amount} />
      </td>
    </tr>
  );
}