<script lang="ts">
  import page from "page";
  import { onMount } from "svelte";
  import type { Component, ComponentProps } from "svelte";
  import Home from "./pages/Home.svelte";

  let CurrentPage: Component<any> | null = $state(null);
  let currentPageProps: any = $state({});

  function bindComponent<T extends Component<any>>(
    component: T,
    props: ComponentProps<T>,
  ) {
    CurrentPage = component;
    currentPageProps = props;
  }

  onMount(() => {
    page("/", () => {
      bindComponent(Home, {});
    });

    page.start();
  });
</script>

<main>
  {#if CurrentPage}
    <CurrentPage {...currentPageProps}></CurrentPage>
  {:else}
    <p>No page bound</p>
  {/if}
</main>
