import React from 'react';
import ReactDOM from 'react-dom/client';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';
import ThemeContextProvider from './ThemeContextProvider';
import Schedule from './components/Schedule';
import Registry from './components/Registry';
import GuestLogin from './components/GuestLogin';
import Rsvp from './components/Rsvp';
import RsvpForm from './components/RsvpForm';
import Home from './components/Home';
import './main.css';

const router = createBrowserRouter([
  {
    element: <App />,
    children: [
      {
        path: '/',
        element: <Home />,
      },
      {
        path: 'schedule',
        element: <Schedule />,
      },
      {
        path: 'registry',
        element: <Registry />,
      },
      {
        path: 'guest/login',
        element: <GuestLogin />,
      },
    ],
  },
  {
    element: <Rsvp />,
    children: [
      {
        path: 'rsvp',
        element: <RsvpForm />,
      },
    ],
  },
]);

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <Provider store={store}>
      <ThemeContextProvider>
        <RouterProvider router={router} />
      </ThemeContextProvider>
    </Provider>
  </React.StrictMode>
);