// Right-side vertical ticker w/ multi-asset rows.
const TICKER_DATA = [
  { sym: "EUR/TRY", v: "36.4821", d: 0.082, src: "frankfurter" },
  { sym: "USD/TRY", v: "33.9104", d: -0.114, src: "frankfurter" },
  { sym: "GBP/TRY", v: "42.1577", d: 0.043, src: "frankfurter" },
  { sym: "BTC/USD", v: "71,420.18", d: 1.221, src: "coingecko" },
  { sym: "ETH/USD", v: "3,841.02", d: 0.642, src: "coingecko" },
  { sym: "SOL/USD", v: "184.31",  d: 2.044, src: "coingecko" },
  { sym: "XU100",   v: "9,872.41", d: -0.213, src: "bist" },
  { sym: "ASELS",   v: "78.40",   d: 0.512, src: "bist" },
  { sym: "THYAO",   v: "294.25",  d: -0.102, src: "bist" },
  { sym: "XAU/USD", v: "2,431.08", d: 0.211, src: "metals" },
  { sym: "XAG/USD", v: "31.84",   d: -0.342, src: "metals" },
  { sym: "BRENT",   v: "84.21",   d: 0.122, src: "ice" },
];

const RightTicker = () => {
  const [data, setData] = React.useState(TICKER_DATA);
  React.useEffect(() => {
    const i = setInterval(() => {
      setData(prev => prev.map(r => ({
        ...r,
        d: +(r.d + (Math.random() - .5) * 0.04).toFixed(3),
      })));
    }, 1800);
    return () => clearInterval(i);
  }, []);

  return (
    <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
      {data.map(r => {
        const up = r.d >= 0;
        return (
          <div key={r.sym} style={{
            display: "grid", gridTemplateColumns: "auto 1fr auto",
            gap: 8, padding: "6px 10px", borderBottom: "1px solid var(--grid)",
            fontSize: 11, alignItems: "center", fontVariantNumeric: "tabular-nums",
          }}>
            <Dot status="online" size={4} />
            <div style={{ display: "flex", flexDirection: "column", lineHeight: 1.1 }}>
              <span style={{ color: "var(--bone)", letterSpacing: ".08em", fontWeight: 600 }}>{r.sym}</span>
              <span style={{ color: "var(--ash-deep)", fontSize: 9, letterSpacing: ".16em", textTransform: "uppercase" }}>{r.src}</span>
            </div>
            <div style={{ textAlign: "right", lineHeight: 1.1 }}>
              <div style={{ color: "var(--bone)", fontWeight: 600 }}>{r.v}</div>
              <div style={{ color: up ? "var(--phosphor)" : "var(--alert)", fontSize: 10 }}>
                {up ? "▲" : "▼"} {Math.abs(r.d).toFixed(3)}%
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
};

window.RightTicker = RightTicker;