import { QueryClientProvider } from "@tanstack/react-query";
import { queryClient } from "@xtablo/shared";
import { SessionProvider } from "@xtablo/shared/contexts/SessionContext";
import { ThemeProvider } from "@xtablo/shared/contexts/ThemeContext";
import { Toaster } from "@xtablo/ui/components/sonner";
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter as Router } from "react-router-dom";
import App from "./App";
import { supabase } from "./lib/supabase";

import "@xtablo/ui/styles/globals.css";
import "@xtablo/tablo-views/styles/tablo-details-shell.css";
import "./main.css";
import "./i18n";
import "./lib/rum";

createRoot(document.getElementById("client-root")!).render(
  <StrictMode>
    <QueryClientProvider client={queryClient}>
      <SessionProvider supabase={supabase}>
        <ThemeProvider>
          <Toaster />
          <Router>
            <App />
          </Router>
        </ThemeProvider>
      </SessionProvider>
    </QueryClientProvider>
  </StrictMode>
);
