import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { StrictMode } from 'react';
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(
    <StrictMode>
        <QueryClientProvider client={queryClient}>
            <BrowserRouter>
                <UserProvider>
                <ThemeProvider>
                    <App />
                    <Toaster richColors position="bottom-right" />
                </ThemeProvider>
            </UserProvider>
            </BrowserRouter>
        </QueryClientProvider>
    </StrictMode>,
);