<script setup lang="ts">
import { useToggleEvents } from '@/composables/useToggleEvents'

const [onTrue, onFalse, toggle, toggleValue] = useToggleEvents()

onTrue(() => {
  alert('you just toggled this to true!')
})

onFalse(() => {
  alert('you just toggled this to false!')
})

</script>

<template>
  <main class="min-h-[500px] flex items-center justify-center">
    <button
      class="text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2"
      @click="toggle">
      Toggle {{ toggleValue ? 'off' : 'on' }}
    </button>
  </main>
</template>