import React, { StrictMode, Suspense } from 'react';
import { createRoot } from 'react-dom/client';

import App from './App.tsx';
import './index.css';
import { registerServiceWorker } from './registerServiceWorker.ts';
import { ErrorBoundary } from './components/ErrorBoundary.tsx';

// Register Service Worker for offline exam content caching safely
registerServiceWorker();

const LoadingFallback = () => (
  <div className="min-h-screen bg-slate-50 flex items-center justify-center p-4 font-sans text-slate-700">
    <div className="text-center space-y-3">
      <div className="w-12 h-12 border-4 border-indigo-600 border-t-transparent rounded-full animate-spin mx-auto"></div>
      <p className="text-xs font-bold text-slate-800">অ্যাপ লোড হচ্ছে...</p>
    </div>
  </div>
);

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <ErrorBoundary>
      <Suspense fallback={<LoadingFallback />}>
        <App />
      </Suspense>
    </ErrorBoundary>
  </StrictMode>,
);