<div>
  <my-counter data-size="small">Loading...</my-counter>
  <my-counter data-size="big"></my-counter>
</div>
<div>
  <my-clock></my-clock>
</div>
<div>
  <my-input></my-input>
</div>

<a href="https://github.com/WebReflection/uhtml">Link to µhtml</a>
<br>
<a href="https://github.com/WebReflection/hooked-elements">Link to hooked-elements</a>
<!-- <div class="buttons"></div> -->

<script type="module">
  import { render, html } from 'https://cdn.esm.sh/v15/uhtml@2.3.1/esnext/uhtml.js';
  import { define, useState, useEffect } from 'https://cdn.esm.sh/v15/hooked-elements@2.2.1/esnext/hooked-elements.js';

  let store = {
    name: "button",
    age: 331
  }

  define('my-counter', element => {
    const [count, update] = useState(0);
    const size = element.getAttribute('data-size');
    render(element, html`
    <button class="large btn" onclick=${() => update(count - 1)}>- ${store.name}</button>
    <span class="large value">${count} ${size}</span>
    <button class="large btn" onclick=${() => update(count + 1)}>+</button>
  `);
  })

  define('my-clock', element => {
    const [time, setTime] = useState();

    useEffect(() => {
      setInterval(() => {
        setTime(useState.time = new Date().toLocaleTimeString())
      }, 1000);
    })

    render(element, html`
    <strong>The time is:</strong> <span>${time}</span>
  `);
  });

  define('my-input', element => {
    const [name, setName] = useState("");
    const updateName = (event) => {
      setName(event.target.value);
    };
    render(element, html`
  <input type="text" value=${name} oninput=${updateName} placeholder="Reactive input" />
  <p>${name}</p>
  `);
  });

</script>