import React, { useEffect } from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import { Toaster } from 'react-hot-toast'
import App from './App'
import { useThemeStore } from './stores/theme'
import './index.css'

// Theme initializer component
function ThemeInitializer({ children }: { children: React.ReactNode }) {
  const initializeTheme = useThemeStore((state) => state.initializeTheme)
  
  useEffect(() => {
    initializeTheme()
  }, [initializeTheme])
  
  return <>{children}</>
}

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <BrowserRouter>
      <ThemeInitializer>
        <App />
        <Toaster 
          position="top-right"
          toastOptions={{
            className: 'bg-night-800 text-night-100 border border-night-700',
            duration: 4000,
          }}
        />
      </ThemeInitializer>
    </BrowserRouter>
  </React.StrictMode>,
)