<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!!"
    >
      <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 justify-end gap-4">
        <AisButton hover press fast alternate
                   variant="default"
                   size="md"
                   icon="cancel"
                   class="rounded-md"
                   @click="open=false"
        >Cancel</AisButton>

        <AisButton hover press fast
                   variant="danger"
                   size="md"
                   icon="confirm"
                   class="rounded-md"
                   @click="open=false"
        >Deactivate</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'
    import AisIcon from '@/components/icon/AisIcon.vue'

    const open = ref(false)

</script>

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