import React, { Suspense } from "react"
import { HashRouter as Router, Routes, Route } from "react-router-dom"
const Home = React.lazy(() => import("./pages/Home"))
const Content = React.lazy(() => import("./pages/Content"))
const Training = React.lazy(() => import("./pages/Training"))
const NewChat = React.lazy(() => import("./pages/NewChat"))
const Exam = React.lazy(() => import("./pages/Exam"))
const AudioTest = React.lazy(() => import("./pages/AudioTest"))
function App() {
  return (
    <Router>
      <Suspense
        fallback={
          <div className="flex_c h_full fs-14 secondaryTextColor">
            Loading...
          </div>
        }
      >
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/content" element={<Content />} />
          <Route path="/training" element={<Training />} />
          <Route path="/practice" element={<Training />} />
          <Route path="/newChat" element={<NewChat />} />
          <Route path="/exam" element={<Exam />} />
          <Route path="/dynamic-test" element={<Exam />} />
          <Route path="/emotional-reply" element={<NewChat />} />
          <Route path="/audio-test" element={<AudioTest />} />
        </Routes>
      </Suspense>
    </Router>
  )
}

export default App
