import { createSignal } from 'solid-js'
import './Counter.sass'

export default () => {
  let [count, setCount] = createSignal(0)

  const increment = () => {
    setCount(count() + 1)
  }

  const decrement = () => {
    setCount(count() - 1)
  }

  return (
    <>
      <section class="counter box">
        <div class="counter__display">{count()}</div>
        <div class="counter__buttons">
          <button class="counter__decrement" onClick={decrement}>
            -
          </button>
          <button class="counter__increment" onClick={increment}>
            +
          </button>
        </div>
      </section>
    </>
  )
}
