<script setup>
  import AisAlert from '../AisAlert.vue';
  import AisCheckbox from '@c/checkbox/AisCheckbox.vue'
  import AisButton from '@/components/button/AisButton.vue';
  import { ref, computed } from 'vue'

  let visible = ref(true)
  let useTransition = ref(true)
  let buttonLabel = computed(() => visible.value ? 'Hide Alert' : 'Show Alert')
  const msg1 = 'Appear and disappear with a fade'
  const msg2 = 'Appear and disappear with no transition'
  const message = computed(() => useTransition.value ? msg1 : msg2)
</script>

<template>
  <div class="grid gap-y-6">
      <AisAlert dismissible v-model="visible"
        title="Fade"
        :transition="useTransition"
      >
        {{message}}
      </AisAlert>

      <div class="flex gap-8">
        <AisButton variant="secondary" @click="visible = !visible">
          {{buttonLabel}}
        </AisButton>
        <AisCheckbox v-model="useTransition">
          Use Transition
        </AisCheckbox>
      </div>

  </div>
</template>