import React, { useState } from 'react'
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'
import ConfigPanel from './components/ConfigPanel'
import ConfigGuide from './components/ConfigGuide'
import TradeList from './components/TradeList'
import StatsDashboard from './components/StatsDashboard'
import Recommendations from './components/Recommendations'
import './App.css'

function App() {
  return (
    <Router>
      <div className="app">
        <nav className="navbar">
          <div className="nav-container">
            <h1 className="nav-title">自动交易系统</h1>
            <div className="nav-links">
              <Link to="/">仪表板</Link>
              <Link to="/recommendations">交易推荐</Link>
              <Link to="/config">配置</Link>
              <Link to="/trades">交易记录</Link>
            </div>
          </div>
        </nav>

        <main className="main-content">
          <Routes>
            <Route path="/" element={<StatsDashboard />} />
            <Route path="/recommendations" element={<Recommendations />} />
            <Route path="/config" element={<ConfigPanel />} />
            <Route path="/config/guide" element={<ConfigGuide />} />
            <Route path="/trades" element={<TradeList />} />
          </Routes>
        </main>
      </div>
    </Router>
  )
}

export default App