<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!!"
        content-class="gap-4"
        icon="error"
        icon-class="text-2xl mt-1"
    >
      <template #icon>
        <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 bg-red-200 rounded-full">
          <AisIcon icon="error" class="text-xl"/>
        </div>
      </template>

      <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>