ConversionBreakdown

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 { RateLine } from "@/components/ledger/rate-line";
import { Rule } from "@/components/ledger/rule";

export interface ConversionBreakdownProps extends React.ComponentPropsWithoutRef<"div"> {
  amount: MoneyValue;
  converted: MoneyValue;
  /** Every fee named and itemized. Never a lump "Fees". */
  fees: { label: string; amount: MoneyValue }[];
  from: string;
  rate: number;
  rateAsOf: Date;
  recipientGets: MoneyValue;
  to: string;
}

/** The honesty pattern, as a component. Every line visible. */
export const ConversionBreakdown = React.forwardRef<HTMLDivElement, ConversionBreakdownProps>(
  ({ className, amount, fees, converted, from, to, rate, rateAsOf, recipientGets, ...props }, ref) => (
    <div className={cn("w-full", className)} ref={ref} {...props}>
      <table className="w-full">
        <caption className="sr-only">Conversion breakdown</caption>
        <tbody>
          <Line amount={amount} label="Amount to convert" showCode />
          {fees.map((f) => (
            <Line amount={f.amount} key={f.label} label={f.label} negative showCode />
          ))}
          <tr>
            <td />
            <td className="py-1">
              <Rule variant="subtotal" />
            </td>
          </tr>
          <Line amount={converted} emphasis label="Amount we’ll convert" showCode />
          <tr>
            <th className="pt-3 text-left" colSpan={2} scope="row">
              <RateLine asOf={rateAsOf} from={from} rate={rate} to={to} />
            </th>
          </tr>
          <Line amount={recipientGets} emphasis label="Recipient gets" showCode size="md" />
          <tr>
            <td />
            <td className="pt-1">
              <Rule variant="total" />
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  ),
);
ConversionBreakdown.displayName = "ConversionBreakdown";

function Line({
  label,
  amount,
  showCode,
  emphasis,
  negative,
  size = "sm",
}: {
  label: string;
  amount: MoneyValue;
  showCode?: boolean;
  emphasis?: boolean;
  negative?: boolean;
  size?: "sm" | "md";
}) {
  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}
      </th>
      <td className="py-1 text-right">
        <Money
          showCode={showCode}
          size={size}
          value={negative ? { ...amount, amount: -Math.abs(Number(amount.amount)) } : amount}
        />
      </td>
    </tr>
  );
}