import { Suspense } from 'react';
import { RouterProvider } from 'react-router-dom';
import { Toaster } from 'react-hot-toast';
import { router } from './routes/adminRoutes';

function SuspenseFallback() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50 font-vazir" dir="rtl">
      <div className="flex flex-col items-center gap-3">
        <div className="w-10 h-10 border-4 border-purple-600 border-t-transparent rounded-full animate-spin"></div>
        <span className="text-sm font-bold text-gray-500">در حال بارگذاری ماژول ادمین...</span>
      </div>
    </div>
  );
}

function App() {
  return (
    <>
      <Toaster 
        position="top-center" 
        toastOptions={{ 
          className: 'font-vazir text-sm font-bold',
          style: {
            direction: 'rtl',
            fontFamily: 'Vazirmatn, system-ui, sans-serif'
          }
        }} 
      />
      <Suspense fallback={<SuspenseFallback />}>
        <RouterProvider router={router} />
      </Suspense>
    </>
  );
}

export default App;