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

    <AisModal
        v-model="open"
        title="Payment successful"
        class="bg-white text-center"
        modal-desc="This is your modal description!!"
        icon-top
    >
      <template #icon>
        <div class="mx-auto flex items-center justify-center h-12 w-12 bg-success rounded-full mb-5">
          <AisIcon icon="confirm" class="text-lg text-white"/>
        </div>
      </template>

      <div class="my-5 text-gray-500">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius aliquam laudantium explicabo pariatur iste
        dolorem animi vitae error totam. At sapiente aliquam accusamus facere veritatis.
      </div>

      <div class="mt-8">
        <AisButton block hover press fast
                   variant="secondary"
                   size="md"
                   icon="confirm"
                   @click="open=false"
        >Got it, thanks!</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>