<template>
    <div>
        <button data-cy="decrement"
                @click="decrement">-
        </button>
        <span data-cy="counter">{{ count }}</span>
        <button data-cy="increment"
                @click="increment">+
        </button>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const props = defineProps(['initial'])

const emit = defineEmits(['change'])

const count = ref(props.initial || 0)

const increment = () => {
    count.value++
    emit('change', count.value)
}

const decrement = () => {
    count.value--
    emit('change', count.value)
}
</script>
