<template>
  <div>
    <AisButton variant="secondary" size="md" @click="open=true">Open Modal</AisButton>

    <AisModal
        v-model="open"
        title="Deactivate Account"
        descr="This is your modal description!!"
        @show="handleShow"
        @shown="handleShown"
        @hide="handleHide"
        @hidden="handleHidden"
    >
      <div class="my-2 text-gray-500">
        Are you sure you want to deactivate your account? All of your data will be permanently removed from our
        servers forever. This action cannot be undone.
      </div>

      <div class="mt-6 flex flex-row-reverse gap-4">
        <AisButton hover press fast
                   variant="danger"
                   size="md"
                   icon="confirm"
                   class="rounded-md"
                   @click="open=false"
        >Deactivate</AisButton>

        <AisButton hover press fast alternate
                   variant="default"
                   size="md"
                   icon="cancel"
                   class="rounded-md"
                   @click="open=false"
        >Cancel</AisButton>
      </div>
    </AisModal>
  </div>
</template>

<script setup>
    import { ref } from 'vue'
    import AisModal from '@/components/modal/AisModal.vue'
    import AisButton from '@/components/button/AisButton.vue'

    const open = ref(false)

    const handleShow = (e) => {
        console.log(`handleShow: e=` + e)
        alert('SHOW')
    }
    const handleShown = (e) => {
        console.log(`handleShown: e=` + e)
        alert('SHOWN')
    }
    const handleHide = (e) => {
        console.log(`handleHide: e=` + e)
        alert('HIDE')
    }
    const handleHidden = (e) => {
        console.log(`handleHidden: e=` + e)
        alert('HIDDEN')
    }
</script>

<script>
    export default {
        name: "AisModalExample"
    }
</script>