import haunted, { useState } from 'https://unpkg.com/haunted/core.js?module';
import { html, render } from 'https://unpkg.com/lighterhtml?module';

const { component } = haunted({
  render: (what, where) => render(where, () => what)
});

function Counter() {
  let [count, set] = useState(0);
  return html`
    <h1>Counter</h1>
    <p>count: <strong>${count}</strong></p>
    <button onclick=${() => set(count + 1)} type="button">Increment</button>
    <button onclick=${() => set(count - 1)} type="button">Decrement</button>
  `;
}

customElements.define('my-counter', component(Counter));