Percent

import * as React from "react";
import { cn } from "@/lib/ledger/cn";
import { formatPercent } from "@/lib/ledger/format-money";
import type { PercentChange } from "@/lib/ledger/money.types";

export interface PercentProps extends Omit<React.ComponentPropsWithoutRef<"span">, "children"> {
  signed?: boolean;
  size?: "xs" | "sm" | "md";
  /** No default kind. Conflating percent with percentage points is the bug. */
  value: PercentChange | null;
}

const SIZES = {
  md: "text-figure-md font-medium",
  sm: "text-figure-sm",
  xs: "text-figure-xs",
} as const;

/**
 * A margin moving 20% → 25% rose 5 percentage points and 25% relative.
 * Both are correct; they are different numbers. The discriminator is required.
 *
 * Division by zero renders `n/a` — never Infinity, never NaN, never 100%.
 */
export const Percent = React.forwardRef<HTMLSpanElement, PercentProps>(
  ({ className, value, signed = true, size = "sm", ...props }, ref) => {
    if (value == null || !Number.isFinite(value.value)) {
      return (
        <span
          className={cn("numeric relative text-text-tertiary", SIZES[size], className)}
          ref={ref}
          {...props}
        >
          <span aria-hidden="true">n/a</span>
          <span className="sr-only select-none">not available</span>
        </span>
      );
    }

    const text = formatPercent(value, { signed });
    const spoken =
      value.kind === "points"
        ? `${text.replace("pp", " percentage points")}`
        : value.kind === "bps"
          ? text.replace(" bps", " basis points")
          : text.replace("%", " percent");

    return (
      <span className={cn("numeric relative whitespace-nowrap", SIZES[size], className)} ref={ref} {...props}>
        <span aria-hidden="true">{text}</span>
        {/* Spoken text, not an aria-label: a label on a role-less span is
            prohibited ARIA. select-none keeps it out of a copied selection. */}
        <span className="sr-only select-none">{spoken.replace("−", "negative ")}</span>
      </span>
    );
  },
);
Percent.displayName = "Percent";