import { esMX } from "@clerk/localizations";
import { ClerkProvider } from "@clerk/react";
import { QueryClientProvider } from "@tanstack/react-query";
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { queryClient } from "@/api/queryClient";
import App from "./App";
import "./index.css";

const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY;

if (!PUBLISHABLE_KEY) {
	throw new Error("Falta VITE_CLERK_PUBLISHABLE_KEY");
}

// biome-ignore lint/style/noNonNullAssertion: index.html siempre trae #root.
createRoot(document.getElementById("root")!).render(
	<StrictMode>
		{/* La misma instancia de Clerk que flete-frontend: los usuarios son los mismos, y quién
		    entra al panel lo decide el backend (ADMIN_USER_IDS), no Clerk. esMX porque tutea. */}
		<ClerkProvider publishableKey={PUBLISHABLE_KEY} localization={esMX}>
			<QueryClientProvider client={queryClient}>
				<App />
			</QueryClientProvider>
		</ClerkProvider>
	</StrictMode>,
);