Rule

import * as React from "react";
import { cn } from "@/lib/ledger/cn";

export interface RuleProps extends React.ComponentPropsWithoutRef<"div"> {
  variant?: "subtotal" | "total" | "section";
}

/**
 * Four centuries of accounting typography, two CSS declarations.
 *
 * A rule spans the numeric column only, never the label column — that is the
 * actual convention, and it is what makes a statement read as accounting
 * rather than as a styled table. Never combined with a background fill on
 * the same row.
 */
export const Rule = React.forwardRef<HTMLDivElement, RuleProps>(
  ({ className, variant = "subtotal", ...props }, ref) => (
    <div
      aria-hidden="true"
      className={cn(
        variant === "subtotal" && "border-t border-border",
        variant === "total" && "border-b-[3px] border-double border-border-strong",
        variant === "section" && "border-t border-border-subtle",
        className,
      )}
      data-rule={variant}
      ref={ref}
      {...props}
    />
  ),
);
Rule.displayName = "Rule";

/** The in-table form: a rule laid inside a cell, spanning the figures only. */
export function RuleCell({
  variant = "subtotal",
  className,
}: {
  variant?: RuleProps["variant"];
  className?: string;
}) {
  return (
    <td className={cn("px-3 py-0", className)}>
      <Rule className="h-0 w-full" variant={variant} />
    </td>
  );
}