import { component, html, prop, useObservable } from 'js-elements'

component('simple-counter', {
  props: {
    label: prop.str.opt('Counter'),
    initialCount: prop.num.opt(0)
  }
}, props => {
  const
    state = useObservable({ count: props.initialCount }),
    onIncrement = () => { ++state.count },
    onDecrement = () => { --state.count }

  return () => html`
    <div>
      <label>${props.label}: </label>
      <button @click=${onDecrement}>-</button>
      <span> ${state.count} </span>
      <button @click=${onIncrement}>+</button>
    <div>
  `
})

document.getElementById('app').appendChild(
  document.createElement('simple-counter'))