import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
import {createRoot} from 'react-dom/client';
import {BrowserRouter} from 'react-router-dom';
import {Toaster} from 'sonner';
import {UserProvider} from '@/contexts';
import {ThemeProvider} from '@/contexts/theme-context';
import './index.css';
import App from './App.tsx';

const queryClient = new QueryClient();

createRoot(document.getElementById('root')!).render(
    <>
        <QueryClientProvider client={queryClient}>
            <BrowserRouter>
                <UserProvider>
                    <ThemeProvider>
                        <App/>
                        <Toaster richColors position="bottom-right"/>
                    </ThemeProvider>
                </UserProvider>
            </BrowserRouter>
        </QueryClientProvider>
    </>,
);