import { h, render, Component } from "preact";
import Router from "preact-router";
import AsyncRoute from "preact-async-route";
import { ThemeProvider } from "@material-ui/core/styles";
import CssBaseline from "@material-ui/core/CssBaseline";
import Home from "./Home";
import theme from "./theme";
import "fontsource-roboto";

class App extends Component {
  render() {
    return (
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <Router>
          <AsyncRoute path="/" getComponent={() =>
            import("./Home").then((module) => module.default)
          }
          />
          <AsyncRoute path="/contact" getComponent={() =>
            import("./Contact").then((module) => module.default)
          }
          />
          <AsyncRoute path="/ramble" getComponent={() =>
            import("./Ramble").then((module) => module.default)
          }
          />
          <AsyncRoute path="/graphics-blog" getComponent={() =>
            import("./GraphicsBlog").then((module) => module.default)
          }
          />
          <AsyncRoute default getComponent={() =>
            import("./404Page").then((module) => module.default)
          }
          />
        </Router>
      </ThemeProvider>
    );
  }
}

render(<App />, document.body);