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

const globalAlertModal = useTemplateRef('global-alert-modal')
</script>
<template>
  <ModalWrapper
    id="global-alert-modal"
    ref="global-alert-modal"
  >
    <template v-slot:default>
      <p id="global-alert-modal-text">This is an alert!</p>
    </template>
    <template v-slot:buttons>
      <AppButton
        id="global-alert-modal-ok-button"
        @click="globalAlertModal?.close('ok')"
        >Ok</AppButton
      >
      <AppButton
        id="global-alert-modal-close-button"
        button-style="secondary"
        @click="globalAlertModal?.close('close')"
        >Close</AppButton
      >
      <AppButton
        id="global-alert-modal-cancel-button"
        button-style="secondary"
        @click="globalAlertModal?.close('cancel')"
        >Cancel</AppButton
      >
    </template>
  </ModalWrapper>
</template>
