import React from 'react';
import ReactDOM from 'react-dom/client';
import { HashRouter } from 'react-router-dom';
import { ConvexProvider, ConvexReactClient } from 'convex/react';
import App from './App';
import './styles/themes.css';
import './index.css';

import { ThemeProvider } from './contexts/ThemeContext';
import { VoiceProvider } from './contexts/VoiceContext';
import TitleBar from './components/TitleBar';

const convex = new ConvexReactClient(import.meta.env.VITE_CONVEX_URL);

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <ThemeProvider>
      <ConvexProvider client={convex}>
        <VoiceProvider>
          <TitleBar />
          <HashRouter>
            <App />
          </HashRouter>
        </VoiceProvider>
      </ConvexProvider>
    </ThemeProvider>
  </React.StrictMode>,
);