import React, { Suspense } from 'react';
import ReactDOM from 'react-dom/client'
// import { ApolloProvider } from '@apollo/client';
// import client from './apollo/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';
import SocketProvider from './context/SocketContext';

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