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

    <AisModal
        v-model="open"
        :size="'sm'"
        class="bg-secondary text-center"
        title="Payment Successful"
        title-class="mt-0 text-primary"
        descr="This is your modal description"
        dismiss-class="text-primary"
    >

      <div class="my-5 text-ui-gray-100">
        Your payment has been successfully submitted. We’ve sent your
        an email with all of the details of your order.
      </div>

      <div class="mt-8">
        <AisButton block hover press fast
                   variant="primary"
                   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'

  const open = ref(false)
</script>

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