import { render } from "preact";
import { LocationProvider, Router, Route } from "preact-iso";
import { ThemeProvider, createTheme } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';

import { Header } from "./components/Header.jsx";
import { CalendarOptimizer } from "./pages/CalendarOptimizer.js";
import { NotFound } from "./pages/_404.jsx";
import { HistoricalCalendarPrices } from "./pages/HistoricalCalendarPrices.js";

const theme = createTheme();

export function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <LocationProvider>
        <div>
          <Header />
          <main>
            <Router>
              <Route path="/" component={HistoricalCalendarPrices} />
              <Route path="/calendar-optimizer" component={CalendarOptimizer} />
              <Route
                path="/historical-calendar-prices"
                component={HistoricalCalendarPrices}
              />
              <Route default component={NotFound} />
            </Router>
          </main>
        </div>
      </LocationProvider>
    </ThemeProvider>
  );
}

render(<App />, document.getElementById("app"));