import React from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import GlobalStyles from './styles/GlobalStyles';
import './styles/fonts.css';
import ErrorBoundary from './components/UI/ErrorBoundary';
import { ThemeProvider as ThemeStateProvider } from './hooks/useTheme';
import { ThemeProvider as MuiThemeProvider } from './styles/theme';

const container = document.getElementById('root');
const root = createRoot(container);

root.render(
  <React.StrictMode>
    <ErrorBoundary>
      <BrowserRouter>
        <ThemeStateProvider>
          <MuiThemeProvider>
            <GlobalStyles />
            <App />
          </MuiThemeProvider>
        </ThemeStateProvider>
      </BrowserRouter>
    </ErrorBoundary>
  </React.StrictMode>
);