import { useClock } from "../clock/clock";
import { formatSpan } from "../clock/timeFormat";
import { formatDuration } from "../format";
import { usePreferences } from "../state/preferences";

/**
 * Live time remaining until `to` (server clock), in the player's countdown
 * format (real, game or both; CR-011); shows `done` once it has passed.
 * `format` styles the real-time part (e.g. mm:ss).
 */
export function Countdown({
  to,
  done = "Arriving…",
  format = formatDuration,
}: {
  to: number;
  done?: string;
  format?: (ms: number) => string;
}) {
  const now = useClock((s) => s.now);
  const mode = usePreferences((p) => p.countdown);
  const remaining = to - now;
  return (
    <span className="tabular-nums">
      {remaining > 0 ? formatSpan(remaining, mode, format) : done}
    </span>
  );
}