import type { BotState } from '../hooks/useWebSocket';

interface MarketTickerProps {
    botState: BotState;
}

export const MarketTicker = ({ botState }: MarketTickerProps) => {
    const symbols = Object.keys(botState.symbols);

    return (
        <div className="market-ticker-card">
            <div className="ticker-header">
                <h3>💹 Market Ticker</h3>
                <span className="ticker-count">{symbols.length} Assets Active</span>
            </div>
            <div className="ticker-grid">
                {symbols.length === 0 && (
                    <div className="ticker-loading">
                        📡 Syncing market data for {botState.settings.maxOpenTrades * 3}+ assets...
                    </div>
                )}
                {symbols.map(symbol => {
                    const data = botState.symbols[symbol];
                    const isUp = data.change24h >= 0;
                    return (
                        <div key={symbol} className="ticker-item">
                            <span className="ticker-symbol">{symbol}</span>
                            <div className="ticker-values">
                                <span className="ticker-price">${data.price.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 4 })}</span>
                                <span className={`ticker-change ${isUp ? 'positive' : 'negative'}`}>
                                    {isUp ? '↑' : '↓'}{Math.abs(data.change24h).toFixed(2)}%
                                </span>
                            </div>
                        </div>
                    );
                })}
            </div>
        </div>
    );
};