<template>
  <div v-if="show" class="fixed inset-0 pop-cont bg-black bg-opacity-50 flex items-center justify-center">
    <div class="bookaro-card bookaro-card__body w-full bookaro-modal-shell bookaro-modal-shell--sm">
      <h3 v-if="title" class="text-lg font-semibold mb-4">{{ title }}</h3>
      <p class="text-gray-800 mb-4">{{ message }}</p>
      <div class="flex items-center justify-end gap-2">
        <button
          type="button"
          class="bookaro-btn bookaro-btn--ghost"
          @click="$emit('cancel')"
        >
          {{ cancelLabel }}
        </button>
        <button
          type="button"
          class="bookaro-btn bookaro-btn--primary"
          :disabled="confirmDisabled"
          @click="$emit('confirm')"
        >
          {{ confirmLabel }}
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ConfirmModal',
  props: {
    show: Boolean,
    title: { type: String, default: '' },
    message: { type: String, default: '' },
    confirmLabel: { type: String, required: true },
    cancelLabel: { type: String, required: true },
    confirmDisabled: { type: Boolean, default: false }
  }
};
</script>

<style scoped>
.pop-cont { z-index: 999; }
</style>
