import React from 'react'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import TabBarLayout from './components/TabBarLayout'
import ProtectedRoute from './components/ProtectedRoute'
import QuestionPage from './pages/Question'
import Login from './pages/Login'
import Home from './pages/Home'
import About from './pages/About'
import WrongQuestions from './pages/WrongQuestions'
import QuestionManagement from './pages/QuestionManagement'

const App: React.FC = () => {
  return (
    <Router>
      <Routes>
        {/* 带TabBar的页面，需要登录保护 */}
        <Route element={<ProtectedRoute><TabBarLayout /></ProtectedRoute>}>
          <Route path="/" element={<Home />} />
          <Route path="/question" element={<QuestionPage />} />
        </Route>

        {/* 不带TabBar的页面，但需要登录保护 */}
        <Route path="/wrong-questions" element={<ProtectedRoute><WrongQuestions /></ProtectedRoute>} />
        <Route path="/question-management" element={<ProtectedRoute><QuestionManagement /></ProtectedRoute>} />

        {/* 不带TabBar的页面，不需要登录保护 */}
        <Route path="/login" element={<Login />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  )
}

export default App