import { StrictMode } from 'react'
import { createRoot, hydrateRoot } from 'react-dom/client'
import { RouterProvider } from 'react-router-dom'
import { Toaster } from 'sonner'
import { HelmetProvider } from 'react-helmet-async'
import router from './router.jsx'
import App from './App.jsx'
import ErrorBoundary from './components/ErrorBoundary.jsx'

// Wrap the router with providers
const Root = () => (
  <StrictMode>
    <HelmetProvider>
      <ErrorBoundary>
        <RouterProvider router={router} />
        <Toaster position="top-right" />
      </ErrorBoundary>
    </HelmetProvider>
  </StrictMode>
)

// Production pages are prerendered (scripts/prerender.js), so attach to the
// existing markup instead of discarding it. The dev server ships an empty shell,
// which falls back to a normal client render.
const container = document.getElementById('root')

if (container.hasChildNodes()) {
  hydrateRoot(container, <Root />)
} else {
  createRoot(container).render(<Root />)
}