import { StrictMode, Suspense } from "react";
import { createRoot } from "react-dom/client";
import { QueryProvider } from "@/providers/query-provider";
import { I18nProvider } from "@/shared/i18n";
import { AppRouter } from "@/app/router";
import { applyTheme, getStoredTheme } from "@/shared/lib/theme";
import { AppLoader } from "@/shared/layout";
import "./index.css";

// Apply the saved theme before first paint to avoid a flash.
applyTheme(getStoredTheme());

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <QueryProvider>
      {/* I18nProvider suspends while the locale files load from /locales. */}
      <Suspense fallback={<AppLoader />}>
        <I18nProvider>
          <AppRouter />
        </I18nProvider>
      </Suspense>
    </QueryProvider>
  </StrictMode>,
);