import { StrictMode } from "react"
import { createRoot } from "react-dom/client"

import "./index.css"
import App from "./App.tsx"
import { ThemeProvider } from "@/components/theme-provider.tsx"
import { ConvexReactClient } from "convex/react"
import { ConvexBetterAuthProvider } from "@convex-dev/better-auth/react"
import { authClient } from "@/lib/auth-client"
import { Toaster } from "./components/ui/sonner.tsx"
import { ConvexQueryCacheProvider } from "convex-helpers/react/cache"

const convex = new ConvexReactClient(
  import.meta.env.VITE_CONVEX_URL as string,
  {
    expectAuth: true,
  }
)

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <ConvexBetterAuthProvider client={convex} authClient={authClient}>
      <ConvexQueryCacheProvider>
        <ThemeProvider>
          <App />
        </ThemeProvider>
        <Toaster position="top-right" richColors closeButton />
      </ConvexQueryCacheProvider>
    </ConvexBetterAuthProvider>
  </StrictMode>
)