<script setup>
import {ref} from 'vue'
import AisButton from '@c/button/AisButton.vue'
const counter = ref(0)
</script>

<template>
  <div class="flex gap-1 items-stretch">
    <AisButton alternate hover press keep-focus
      variant="secondary"
      icon="down"
      @click="counter--"
    >
      Decrement
    </AisButton>
    <div class="px-4 py-1 text-2xl border border-ui-gray-900">
      {{counter}}
    </div>
    <AisButton alternate hover press keep-focus
      variant="secondary"
      icon-right="up"
      @click="counter++"
    >
      Increment
    </AisButton>
  </div>
</template>
