import { StrictMode } from "react"
import { createRoot } from "react-dom/client"
import { BrowserRouter } from "react-router-dom"
import { DirectionProvider } from "@radix-ui/react-direction"
import { useTranslation } from "react-i18next"

import { ThemeProvider } from "@/providers/themeProvider"
import { AuthProvider } from "@/lib/auth/authProvider"
import { AppRoutes } from "@/routes"
import { bootstrapI18n } from "@/i18n/config"
import { getDirection } from "@/i18n/routing"

import "./index.css"

await bootstrapI18n()

function App() {
  const { i18n } = useTranslation()
  const dir = getDirection(i18n.language)

  return (
    <DirectionProvider dir={dir}>
      <AuthProvider>
        <AppRoutes />
      </AuthProvider>
    </DirectionProvider>
  )
}

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <BrowserRouter>
      <ThemeProvider defaultTheme="system">
        <App />
      </ThemeProvider>
    </BrowserRouter>
  </StrictMode>
)