import React, { Suspense } from 'react';
import ReactDOM from 'react-dom/client';

// styles
import 'react-perfect-scrollbar/dist/css/styles.css';
import './tailwind.css';

// i18n
import './i18n';

// router
import { RouterProvider } from 'react-router-dom';
import router from './router/index';

// redux
import { Provider } from 'react-redux';
import store from './store/index';

// settings
import { SettingsProvider } from './context/SettingsContext';

// theme
import { loadTheme } from './utils/theme';
loadTheme();

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <Suspense>
      <Provider store={store}>
        <SettingsProvider>
          <RouterProvider router={router} />
        </SettingsProvider>
      </Provider>
    </Suspense>
  </React.StrictMode>
);