import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { RouterProvider } from 'react-router-dom';
import { theme } from './theme/theme.ts';
import { CssBaseline, ThemeProvider } from '@mui/material';
import BreakpointsProvider from 'providers/BreakpointsProvider.tsx';
import router from 'routes/router.tsx';
import { AuthProvider } from 'contexts/AuthContext.tsx';
import { AccountProvider } from 'contexts/AccountContext.tsx';
import { WebSocketProvider } from 'contexts/WebSocketContext.tsx';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <BreakpointsProvider>
        <AuthProvider>
          <AccountProvider>
            <WebSocketProvider>
              <CssBaseline />
              <RouterProvider router={router} />
            </WebSocketProvider>
          </AccountProvider>
        </AuthProvider>
      </BreakpointsProvider>
    </ThemeProvider>
  </React.StrictMode>,
);
