import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import { Toaster } from 'react-hot-toast';

import App from './App.jsx';
import { AuthProvider } from './context/AuthContext.jsx';
import { CartProvider } from './context/CartContext.jsx';

import './index.css';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <BrowserRouter>
      {/* Auth state is available everywhere */}
      <AuthProvider>
        {/* Cart state is available everywhere */}
        <CartProvider>
          <App />

          {/* Global toast notifications */}
          <Toaster
            position="top-right"
            toastOptions={{
              duration: 4000,
              style: {
                background: '#2D1408',
                color: '#F5E6C8',
                border: '1px solid rgba(201,168,76,0.25)',
                borderRadius: '12px',
                fontSize: '14px',
                fontFamily: '"DM Sans", sans-serif',
                padding: '12px 16px',
              },
              success: {
                iconTheme: { primary: '#C9A84C', secondary: '#0A0402' },
              },
              error: {
                iconTheme: { primary: '#E07050', secondary: '#0A0402' },
              },
            }}
          />
        </CartProvider>
      </AuthProvider>
    </BrowserRouter>
  </React.StrictMode>
);