import React from 'react'

const SYMBOLS = [
  { label: 'BTC/USDT (Binance)', value: 'BTCUSDT' },
  { label: 'ETH/USDT (Binance)', value: 'ETHUSDT' },
  { label: 'XAU/USD (Gold)', value: 'XAUUSD' },
]

const TIMEFRAMES = [
  { label: '1m', value: '1m' },
  { label: '5m', value: '5m' },
  { label: '1h', value: '1h' },
  { label: '4h', value: '4h' },
]

export default function SymbolTimeframeSelector({
  symbol,
  timeframe,
  onChangeSymbol,
  onChangeTimeframe,
}: {
  symbol: string
  timeframe: string
  onChangeSymbol: (v: string) => void
  onChangeTimeframe: (v: string) => void
}) {
  return (
    <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
      <select
        className="input"
        value={symbol}
        onChange={(e) => onChangeSymbol(e.target.value)}
        aria-label="Symbol"
      >
        {SYMBOLS.map((s) => (
          <option key={s.value} value={s.value}>{s.label}</option>
        ))}
      </select>
      <select
        className="input"
        value={timeframe}
        onChange={(e) => onChangeTimeframe(e.target.value)}
        aria-label="Timeframe"
      >
        {TIMEFRAMES.map((t) => (
          <option key={t.value} value={t.value}>{t.label}</option>
        ))}
      </select>
    </div>
  )
}
