import type { ReactNode } from 'react';

export type TickerItem = {
  key: string;
  label: ReactNode;
  changePct: number;
  active?: boolean;
};

type Props = {
  items: TickerItem[];
  className?: string;
};

function formatPct(v: number): string {
  const s = v >= 0 ? '+' : '';
  return `${s}${v.toFixed(2)}%`;
}

export default function TickerBar({ items, className }: Props) {
  return (
    <div className={['tickerBar', className].filter(Boolean).join(' ')}>
      {items.map((t) => (
        <div key={t.key} className={['ticker', t.active ? 'ticker--active' : ''].filter(Boolean).join(' ')}>
          <span className="ticker__label">{t.label}</span>
          <span className={['ticker__pct', t.changePct >= 0 ? 'pos' : 'neg'].join(' ')}>{formatPct(t.changePct)}</span>
        </div>
      ))}
    </div>
  );
}