<script setup>
const props = defineProps({
  modelValue: Boolean,
  title: String,
  subTitle: String,
  targetId: [String, Number]
})

const emit = defineEmits(['update:modelValue', 'handler'])

const cancelConfirmation = () => {
  emit('update:modelValue', false)
}
const okayConfirmation = () => {
  emit('handler', props.targetId)
  emit('update:modelValue', false)
}
</script>

<template>
  <div class="alertModal" :class="{active: modelValue, 'd-none': !modelValue}">
    <!--<div class="alertBackdrop" @click="cancelConfirmation"></div>-->
    <div class="alertDialog alertCenter" @click.self="cancelConfirmation">
      <div class="alertContent">
        <div class="alertHeader"></div>
        <div class="alertBody">
          <h3 class="alertTitle">{{ title }}</h3>
          <p class="alertText">{{ subTitle }}</p>
        </div>
        <div class="alertFooter">
          <button type="button" class="button alertCancel" @click="cancelConfirmation">Cancel</button>
          <button type="button" class="button alertOkay" @click="okayConfirmation">Okay</button>
        </div>
      </div>
    </div>
  </div>
</template>