import React, { Suspense } from 'react';
import ReactDOM from 'react-dom/client';
import App from '@/App';
import '@/index.css';
import { CountryProvider } from '@/contexts/CountryContext';
import { CurrencyProvider } from '@/contexts/CurrencyContext';
import '@/i18n'; // Initialize i18next
import { BrowserRouter as Router } from 'react-router-dom'; // Import Router here

const LoadingFallback = () => (
  <div className="flex justify-center items-center h-screen">
    <div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-primary"></div>
  </div>
);

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Suspense fallback={<LoadingFallback />}>
      <Router> {/* Router now wraps the providers */}
        <CountryProvider>
          <CurrencyProvider>
            <App />
          </CurrencyProvider>
        </CountryProvider>
      </Router>
    </Suspense>
  </React.StrictMode>
);