import { Routes, Route } from 'react-router-dom'
import { useEffect } from 'react'
import { useAppStore } from './store/appStore'
import Layout from './components/Layout'
import Dashboard from './pages/Dashboard'
import Plugins from './pages/Plugins'
import Settings from './pages/Settings'
import Nexus from './pages/Nexus'
import Overlay from './pages/Overlay'
import './styles/App.css'

function App() {
  const { initialize } = useAppStore()

  useEffect(() => {
    initialize()
  }, [])

  return (
    <Routes>
      <Route path="/" element={<Layout />}>
        <Route index element={<Dashboard />} />
        <Route path="plugins" element={<Plugins />} />
        <Route path="settings" element={<Settings />} />
        <Route path="nexus" element={<Nexus />} />
      </Route>
      <Route path="/overlay" element={<Overlay />} />
    </Routes>
  )
}

export default App