import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { BrowserRouter, Route, Routes } from 'react-router-dom'
import { Toaster } from 'react-hot-toast'
import '@fontsource/inter/300.css'
import '@fontsource/inter/400.css'
import '@fontsource/inter/500.css'
import '@fontsource/inter/700.css'
import './index.css'
import Layout from './components/Layout'
import AuthGate from './components/AuthGate'
import DashboardPage from './pages/DashboardPage'
import HoyPage from './pages/HoyPage'
import PlanDetallePage from './pages/PlanDetallePage'
import NuevoPlanPage from './pages/NuevoPlanPage'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <BrowserRouter basename="/pay">
      <AuthGate>
        <Layout>
          <Routes>
            <Route path="/" element={<DashboardPage />} />
            <Route path="/hoy" element={<HoyPage />} />
            <Route path="/planes/:id" element={<PlanDetallePage />} />
            <Route path="/nuevo" element={<NuevoPlanPage />} />
            <Route path="*" element={<DashboardPage />} />
          </Routes>
        </Layout>
      </AuthGate>
    </BrowserRouter>
    <Toaster position="top-right" toastOptions={{ duration: 3000 }} />
  </StrictMode>,
)