<template>
  <div>

    <div class="grid gap-8">
      <div>
        <AisButton variant="secondary" size="md" @click="open=true">Show Modal</AisButton>
      </div>
      <div>
        <AisRadioGroup
          v-model="size"
          :options="sizes"
          name="modalSizes"
        />
      </div>
    </div>

    <AisModal
        v-model="open"
        :size="size"
        title="Payment successful"
        title-class="sr-only"
        class="bg-white text-center"
        modal-desc="This is your modal description!!"
    >

      <div class="flex flex-col">
        <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>
        <div class="w-full">
          <h3 class="mt-0">Payment successful</h3>
          <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>
        </div>
      </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'
  import AisRadioGroup from "@/components/radio-group/AisRadioGroup.vue"

  const open = ref(false)
  const size = ref('md')
  const sizes = ref([
      { value: 'sm', label: 'Small' },
      { value: 'md', label: 'Medium' },
      { value: 'lg', label: 'Large' },
      { value: 'xl', label: 'X-Large' },

  ])
</script>

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