import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import { AuthProvider } from '@/context/AuthContext';
import { ThemeProvider } from '@/context/ThemeContext';
import { Toaster } from 'react-hot-toast';
import App from '@/App';
import '../css/app.css';

ReactDOM.createRoot(document.getElementById('root')!).render(
    <React.StrictMode>
        <BrowserRouter>
            <AuthProvider>
                <ThemeProvider>
                    <App />
                    <Toaster
                        position="top-center"
                        toastOptions={{
                            duration: 3000,
                            style: {
                                borderRadius: '12px',
                                background: '#1f2937',
                                color: '#f9fafb',
                                fontSize: '14px',
                            },
                            success: { iconTheme: { primary: '#0d9488', secondary: '#f0fdfa' } },
                            error: { iconTheme: { primary: '#ef4444', secondary: '#fef2f2' } },
                        }}
                    />
                </ThemeProvider>
            </AuthProvider>
        </BrowserRouter>
    </React.StrictMode>
);
