;(function () {
/* TopTraded — card showing the user's watchlist symbols (the same set
   that's actively ticking via dummy-feed). One column per watchlist
   entry with a SymbolMark, ticker, and category sub-label. */

const CAT_LABEL = {
  forex: 'FX Major',
  indices: 'Index',
  commodities: 'Commodity',
  crypto: 'Crypto',
  stocks: 'Stock',
};

const Column = ({ sym }) => (
  <div style={styles.col}>
    <window.SymbolMark sym={sym} size={32} />
    <span style={styles.ticker}>{sym.sym}</span>
    <span style={styles.sub}>{CAT_LABEL[sym.cat] || sym.cat}</span>
  </div>
);

const TopTraded = () => {
  const allSymbols = window.useAllSymbols ? window.useAllSymbols() : [];
  const watchlist = (window.WATCHLIST_IDS || [])
    .map((id) => allSymbols.find((s) => s.sym === id))
    .filter(Boolean);

  return (
    <Card>
      <SectionHeader title="Top Active Today" />
      <div style={styles.row}>
        {watchlist.map((sym) => (
          <Column key={sym.sym} sym={sym} />
        ))}
      </div>
    </Card>
  );
};

const styles = {
  row: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingTop: '8px',
    paddingBottom: '8px',
    gap: '4px',
  },
  col: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    gap: '6px',
    flex: 1,
    minWidth: 0,
  },
  ticker: {
    fontFamily: 'Gilroy',
    fontWeight: 700,
    fontSize: '13px',
    color: colors.ink2,
    fontVariantNumeric: 'tabular-nums',
  },
  sub: {
    fontFamily: 'Inter',
    fontWeight: 400,
    fontSize: '11px',
    color: colors.muted2,
    whiteSpace: 'nowrap',
  },
};

Object.assign(window, { TopTraded });
})();