StatementRow

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

export interface StatementRowProps extends React.ComponentPropsWithoutRef<"tr"> {
  expandable?: boolean;
  expanded?: boolean;
  label: string;
  level?: number;
  onToggle?: () => void;
  values: (MoneyValue | null)[];
  variant?: StatementRowVariant;
}

/**
 * One line. Server-safe (no `"use client"`) — a 400-row statement renders on
 * the server, which is why `Money`, `Rule` and this component all stay RSC-
 * compatible. That is a performance decision, not a purity one.
 */
export const StatementRow = React.forwardRef<HTMLTableRowElement, StatementRowProps>(
  (
    { className, label, level = 1, variant = "line", values, expandable, expanded, onToggle, ...props },
    ref,
  ) => {
    const emphasized = variant === "subtotal" || variant === "total";
    const accessibleLabel =
      variant === "total" ? `${label}, grand total` : variant === "subtotal" ? `${label}, subtotal` : label;

    return (
      <tr
        className={cn("border-b border-border-subtle", className)}
        data-row-variant={variant}
        ref={ref}
        {...props}
      >
        <th
          className={cn(
            "py-3 pr-4 text-left font-normal",
            emphasized && "font-medium",
            variant === "section" && "text-title-sm font-medium",
          )}
          data-level={level}
          scope="row"
          style={{ paddingLeft: 24 + 24 * (level - 1) }}
        >
          {expandable ? (
            <button
              aria-expanded={expanded}
              className="mr-1 text-text-tertiary"
              onClick={onToggle}
              type="button"
            >
              {expanded ? "−" : "+"}
            </button>
          ) : null}
          {accessibleLabel}
        </th>
        {values.map((v, i) => (
          <td className="px-3 py-3 text-right" key={i}>
            {variant === "section" ? null : (
              <Money accounting size={variant === "total" ? "md" : "sm"} statement value={v} />
            )}
          </td>
        ))}
      </tr>
    );
  },
);
StatementRow.displayName = "StatementRow";

export { Rule } from "@/components/ledger/rule";