import React from 'react';
import { Outlet, Route, Routes } from 'react-router-dom';
import useMediaQuery from '@mui/material/useMediaQuery';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';

import Bar from './components/Bar';
import Home from './components/Home';
import Schedule from './components/Schedule';
import Registry from './components/Registry';
import Rsvp from './components/Rsvp';


function App() {
  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');

  const theme = React.useMemo(
    () =>
      createTheme({
        palette: {
          mode: prefersDarkMode ? 'dark' : 'light'
        }
      }),
    [prefersDarkMode]
  );

  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Bar />
      <Outlet />
    </ThemeProvider>
  );
}

export default App;