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

<template>
  <div class="flex gap-2">
    <AisIconButton
      hover press keep-focus
      icon="left"
      label="Decrement counter"
      @click="counter--"
      size="3xl"
    />
    <div class="text-3xl">
      {{counter}}
    </div>
    <AisIconButton
      hover press keep-focus
      icon="right"
      label="Increment counter"
      @click="counter++"
      size="3xl"
    />
  </div>
</template>
