import React from 'react';
import ReactDOM from 'react-dom/client';
import { render } from 'react-dom';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { ApiProvider } from '@reduxjs/toolkit/query/react';

import App from './App';
import { apiSlice } from './apiSlice';
import ThemeContextProvider from './ThemeContextProvider'
import Schedule from './components/Schedule';
import Registry from './components/Registry';
import Rsvp from './components/Rsvp';
import Admin from './components/Admin';

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    children: [
      {
        path: "schedule",
        element: <Schedule />
      },
      {
        path: "registry",
        element: <Registry />
      },
      {
        path: "rsvp",
        element: <Rsvp />
      },
      {
        path: "admin",
        element: <Admin />
      }
    ]
  }
])

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <ApiProvider api={apiSlice}>
      <ThemeContextProvider>
        <RouterProvider router={router} />
      </ThemeContextProvider>
    </ApiProvider>
  </React.StrictMode>
)