<!-- ConfirmationModal.vue -->
<template>
    <div class="modal" :id="modalId" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true"
         data-bs-backdrop="static" data-bs-keyboard="false">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="modalLabel">{{ title }}</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            {{ message }}
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ cancelButtonText }}</button>
            <button type="button" class="btn btn-primary" @click="confirmAction">{{ confirmButtonText }}</button>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  
  const modalId = ref(null);
  
  const title = 'Confirm Action';
  const message = 'Are you sure you want to proceed?';
  const confirmButtonText = 'Confirm';
  const cancelButtonText = 'Cancel';
  
  // Methods
  function confirmAction() {
    emit('confirm');
  }
  </script>