RateLine

"use client";

import * as React from "react";
import { useValueFlash } from "@/hooks/ledger/use-live-value";
import { cn } from "@/lib/ledger/cn";
import { formatRate } from "@/lib/ledger/format-money";
import { AsOf } from "@/components/ledger/as-of";

export interface RateLineProps extends React.ComponentPropsWithoutRef<"div"> {
  /** Not optional. The component has no variant without it. */
  asOf: Date;
  from: string;
  live?: boolean;
  locked?: boolean;
  rate: number;
  to: string;
}

/* Lives in ../lib/format-money so Server Components can call it; re-exported
   here for anything that already imports it from this module. */
export { formatRate } from "@/lib/ledger/format-money";

export const RateLine = React.forwardRef<HTMLDivElement, RateLineProps>(
  ({ className, from, to, rate, asOf, live = false, locked = false, ...props }, ref) => {
    const { flash, key } = useValueFlash(live ? rate : undefined);
    return (
      <div className={cn("flex flex-wrap items-center gap-2 text-caption", className)} ref={ref} {...props}>
        <span
          className={cn(
            "numeric rounded-xs px-1 text-body text-text-primary",
            flash === "positive" && "ledger-flash-positive",
            flash === "negative" && "ledger-flash-negative",
          )}
          key={key}
        >
          1 {from} = {formatRate(rate)} {to}
        </span>
        <span aria-hidden="true" className="text-text-tertiary">
          ·
        </span>
        <AsOf date={asOf} />
        {locked ? (
          <span className="rounded-xs bg-accent-subtle px-1.5 py-0.5 text-caption font-medium text-accent">
            Locked
          </span>
        ) : null}
      </div>
    );
  },
);
RateLine.displayName = "RateLine";