"use client";

import { useEffect, useState } from "react";
import { HIDE_AMOUNTS_EVENT } from "@/ds";

/**
 * `tugrik()` / `tugrikShort()` (web/src/ds/money.ts) read the global
 * hide-amounts flag from localStorage synchronously, so a component that
 * calls them needs a reason to re-render when `HideAmountsToggle` flips it.
 * Call this in any component that formats money with those helpers.
 */
export function useHideAmountsTick(): number {
  const [tick, setTick] = useState(0);

  useEffect(() => {
    function onChange() {
      setTick((t) => t + 1);
    }
    window.addEventListener(HIDE_AMOUNTS_EVENT, onChange);
    return () => window.removeEventListener(HIDE_AMOUNTS_EVENT, onChange);
  }, []);

  return tick;
}