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

type AboutProps = { count: number };
function AboutCounter(props: AboutProps) {
  const [count, setCount] = createSignal(props.count);
  return (
    <section aria-label="About counter">
      <button
        id="about-increment"
        type="button"
        onClick={() => setCount(count() + 2)}
      >
        Add two to About
      </button>
      <output id="about-count">{() => count()}</output>
    </section>
  );
}
function About(props: AboutProps) {
  return (
    <main>
      <h1 data-forma-route-heading="" tabindex="-1">
        About
      </h1>
      <p>
        The layout counter and note retain their state. This destination has its
        own compiled island.
      </p>
      <AboutCounter count={props.count} />
      <form method="get" action="/about">
        <label>
          Server seed{" "}
          <input
            name="count"
            type="number"
            min="0"
            max="9999"
            step="1"
            required
            value={props.count}
          />
        </label>
        <button type="submit">Render About from Rust</button>
      </form>
      <p>
        <a href="/" data-no-router="">
          Reset with a full document
        </a>
      </p>
    </main>
  );
}
activateIslands({ AboutCounter });
mount(() => About({ count: 0 }), "#app");