/* v3/indices-ribbon.jsx — sticky ribbon of key indices under the topbar */
const { useEffect: useIRE, useRef: useIRR } = React;

const RIBBON_INDICES = [
  { sym: "SPX",  label: "S&P 500",    pre: "" },
  { sym: "NDX",  label: "Nasdaq 100", pre: "" },
  { sym: "DJI",  label: "Dow 30",     pre: "" },
  { sym: "RUT",  label: "Russell 2K", pre: "" },
  { sym: "VIX",  label: "VIX",        pre: "" },
  { sym: "DXY",  label: "Dollar",     pre: "" },
  { sym: "XAU",  label: "Gold",       pre: "$" },
  { sym: "BTC",  label: "Bitcoin",    pre: "$" },
];

function IndicesRibbon({ livePrices }) {
  const railRef = useIRR(null);
  // fallback: grab any listed row from watchlist/data
  const read = (sym) => {
    if (livePrices[sym]) return livePrices[sym];
    if (BY_SYM[sym]) return BY_SYM[sym];
    // synthesize from today array if missing
    const t = today.find(r => r.sym === sym);
    return t || { sym, px: 0, chPct: 0 };
  };

  return (
    <div className="ribbon">
      <div className="ribbon-rail" ref={railRef}>
        {RIBBON_INDICES.map(it => {
          const d = read(it.sym);
          const dir = (d.chPct || 0) >= 0 ? "up" : "down";
          const px = d.px ?? 0;
          return (
            <div className="rb-item" key={it.sym} title={it.label}>
              <div className="rb-lhs">
                <div className="rb-label">{it.label}</div>
                <div className="rb-px tabnum">
                  {it.pre || ""}{fmtPx(px)}{it.suffix || ""}
                </div>
              </div>
              <div className={"rb-pct tabnum " + dir}>{fmtPct(d.chPct || 0)}</div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

Object.assign(window, { IndicesRibbon });