<script setup lang="ts">
import { useTemplateRef } from 'vue'
import AppButton from '@/components/common/AppButton.vue'
import ModalWrapper from '@/components/common/ModalWrapper.vue'

const modal = useTemplateRef('modal')

async function confirm(): Promise<boolean> {
  const result = await modal.value?.show()
  return result === 'confirm'
}

defineExpose({ confirm })
</script>
<template>
  <ModalWrapper ref="modal">
    <template v-slot:default>
      <h3 class="app-modal-dialog-header">Confirm</h3>
      <slot>
        <p>Are you sure you want to proceed?</p>
      </slot>
    </template>
    <template v-slot:buttons>
      <AppButton @click="modal?.close('confirm')">Ok</AppButton>
      <AppButton
        button-style="secondary"
        @click="modal?.close()"
        >Cancel</AppButton
      >
    </template>
  </ModalWrapper>
</template>
