RateTicker

"use client";

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

export type Pair = { from: string; to: string; rate: number };

export interface RateTickerProps {
  className?: string;
  pairs: Pair[];
}

/**
 * The value flash is the whole point. Never a marquee — a scrolling ticker
 * is continuous large-surface motion that can't be read and can't be paused.
 * Pauses off-screen and on tab hide.
 */
export function RateTicker({ pairs: initial, className }: RateTickerProps) {
  const [pairs, setPairs] = React.useState(initial);
  const ref = useLiveTicker(() => {
    setPairs((prev) =>
      prev.map((p) => ({
        ...p,
        rate: p.rate * (1 + (Math.random() - 0.5) * 0.0018),
      })),
    );
  }, 2400);

  return (
    <section
      aria-label="Live exchange rates"
      className={cn(
        "flex flex-wrap gap-x-6 gap-y-2 rounded-md border border-border bg-surface px-4 py-3",
        className,
      )}
      ref={ref}
    >
      {pairs.map((p) => (
        <TickerCell key={`${p.from}/${p.to}`} pair={p} />
      ))}
    </section>
  );
}

function TickerCell({ pair }: { pair: Pair }) {
  // Throttled to one flash per 400ms by the tick interval itself.
  const { flash, key } = useValueFlash(pair.rate);
  return (
    <span className="flex items-baseline gap-2">
      <span className="text-caption text-text-secondary">
        {pair.from}/{pair.to}
      </span>
      <span
        className={cn(
          "numeric rounded-xs px-1 text-figure-sm",
          flash === "positive" && "ledger-flash-positive",
          flash === "negative" && "ledger-flash-negative",
        )}
        key={key}
      >
        {formatRate(pair.rate)}
      </span>
    </span>
  );
}