(() => {
  const { el, render, state } = act;

  const Counter = ({ title, color, initialState }) => {
    const counterState = state(initialState);

    const setupOutput = (newValue) =>
      'Counter "' + title + '" value is ' + newValue + ".";

    const output = el(
      "h1",
      { style: { color: color } },
      setupOutput(initialState),
    );

    const incr = () => counterState(counterState() + 1);
    const decr = () => counterState(counterState() - 1);
    const reset = () => counterState(initialState);

    counterState((newState) => {
      output.innerText = setupOutput(newState);
    });

    return el(
      "div",
      null,
      output,
      el("button", { onClick: incr }, "+"),
      el("button", { onClick: reset }, "reset"),
      el("button", { onClick: decr }, "-"),
    );
  };

  const App = () => {
    return el(
      "div",
      null,
      Counter({ title: "A", color: "red", initialState: 0 }),
      Counter({ title: "B", color: "green", initialState: -5 }),
      Counter({ title: "C", color: "blue", initialState: 5 }),
    );
  };

  render(document.getElementById("root"), App());
})();