import { Route, Router } from "@solidjs/router";
import { ThemeProvider } from "@suid/material";
import { Component, lazy } from "solid-js";
import { useRootTheme } from "./material/mui.js";
import "./App.css"

const AccountSignIn = lazy(() => import("./accounts/SignIn.js"));
const AccountMastodonOAuth2Callback = lazy(() => import("./accounts/MastodonOAuth2Callback.js"))
const TimelineHome = lazy(() => import("./timelines/Home.js"))

const Routing: Component = () => {
  return (
    <Router>
      <Route path="/" component={TimelineHome}></Route>
      <Route path={"/accounts"}>
        <Route path={"/sign-in"} component={AccountSignIn} />
        <Route path={"/oauth2/mastodon"} component={AccountMastodonOAuth2Callback} />
      </Route>
    </Router>
  );
};

const App: Component = () => {
  const theme = useRootTheme();
  return (
    <ThemeProvider theme={theme()}>
      <Routing />
    </ThemeProvider>
  );
};

export default App;