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

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

// Tailwind css
import './tailwind.css';

// i18n (needs to be bundled)
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';

// React Query
import { QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { queryClient } from './lib/reactQuery';

// React Query Auth
import { AuthLoader } from './lib/auth';
import IconLoader from './components/Icon/IconLoader';

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
    <React.StrictMode>
        <Suspense>
            <Provider store={store}>
                <QueryClientProvider client={queryClient}>
                    <ReactQueryDevtools />
                    <AuthLoader
                        renderLoading={() => (
                            <div className="flex h-screen w-screen items-center justify-center">
                                <IconLoader className="animate-spin" />
                            </div>
                        )}
                    >
                        <RouterProvider router={router} />
                    </AuthLoader>
                </QueryClientProvider>
            </Provider>
        </Suspense>
    </React.StrictMode>
);
