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

interface SignalsTabProps {
    botState: BotState;
    connected?: boolean;
}

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

    const emptyMessage = connected === false
        ? 'Connecting to bot… signals will appear once the real-time feed is established.'
        : 'No symbols available. Add symbols to your trading profiles to see live signals here.';

    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">{emptyMessage}</div>
                )}
            </div>
        </div>
    );
};
