import { Suspense } from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import './index.css';

import { Toaster } from 'react-hot-toast';
import { I18nextProvider } from 'react-i18next';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
import { PersistGate } from 'redux-persist/integration/react';
import i18n from './i18n';
import { persistor, store } from './redux/store.tsx';
import PageLoader from './views/components/UiComponent/PageLoader.tsx';
import { HelmetProvider } from 'react-helmet-async';

const rootElement = document.getElementById('root');

if (rootElement) {
  ReactDOM.createRoot(rootElement).render(
    <BrowserRouter>
      <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
          <I18nextProvider i18n={i18n}>
            <Suspense fallback={<PageLoader />}>
              <HelmetProvider>
                <App />
                <Toaster
                  position="top-right"
                  toastOptions={{ className: 'react-hot-toast' }}
                />
              </HelmetProvider>
            </Suspense>
          </I18nextProvider>
        </PersistGate>
      </Provider>
    </BrowserRouter>
  );
} else {
  console.error("Root element 'root' not found.");
}