import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { BrowserRouter, Routes, Route } from "react-router";

import './index.css'
import App from './App.jsx'
import { Settings } from './pages/settings.jsx';
import { Flow } from './pages/flow.jsx';
import { FlowMoty } from './pages/flow_moty.jsx';
import { Conversation } from './pages/conversation.jsx';
import { ChatProvider } from './util/useChat.jsx';
import { DataProvider } from './util/useData.jsx';
import { FreeFlow } from './pages/flow_free.jsx';
import { UserProvider } from './util/useUser.jsx';

createRoot(document.getElementById('root')).render(
  <StrictMode>    
    <DataProvider>
      <UserProvider>
      <ChatProvider>
        <BrowserRouter>
            <App />
            <Routes>
              <Route path="/" element={<FlowMoty />} />
              <Route path="/flow" element={<Flow />} />
              <Route path="/free-flow" element={<FreeFlow />} />
              <Route path="/settings" element={<Settings />} />
              <Route path="/moty" element={<FlowMoty />} />
            </Routes>     
        </BrowserRouter>
      </ChatProvider>
      </UserProvider>
    </DataProvider>
    
  </StrictMode>,
)
