<script setup lang="ts">
import { useTemplateRef } from 'vue';
import ModalWrapper from './ModalWrapper.vue';
import AppButton from './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>
