import { h, mount, activateIslands, createSignal } from "@getforma/core";

type HomeProps = { count: number };
function Counter(props: HomeProps) {
  const [count, setCount] = createSignal(props.count);
  return (
    <section aria-label="Home counter">
      <button id="home-increment" onClick={() => setCount(count() + 1)}>
        Increment home
      </button>
      <output id="home-count">{() => count()}</output>
    </section>
  );
}
function Home(props: HomeProps) {
  return (
    <main>
      <h1 data-forma-route-heading="" tabindex="-1">
        Home
      </h1>
      <p>This page is already present in the server HTML.</p>
      <Counter count={props.count} />
      <form method="get" action="/">
        <label>
          Server seed{" "}
          <input
            name="count"
            type="number"
            min="0"
            max="9999"
            step="1"
            required
            value={props.count}
          />
        </label>
        <button type="submit">Render Home from Rust</button>
      </form>
    </main>
  );
}
activateIslands({ Counter });
mount(() => Home({ count: 0 }), "#app");