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

interface SignalsTabProps {
    botState: BotState;
}

export const SignalsTab = ({ botState }: SignalsTabProps) => {
    const symbols = Object.keys(botState.symbols);

    return (
        <div className="signals-tab">
            <div className="tab-header">
                <h2>Market Signals</h2>
                <p>Live technical analysis and rule verification for active assets.</p>
            </div>

            <div className="symbols-grid">
                {symbols.length > 0 ? (
                    symbols.map(symbol => (
                        <SymbolCard key={symbol} symbol={symbol} data={botState.symbols[symbol]} />
                    ))
                ) : (
                    <div className="empty-state">No symbols configured. Check your .env file.</div>
                )}
            </div>
        </div>
    );
};
