<template>
  <div v-if="isOpen" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
    <div class="bg-white rounded-2xl shadow-xl w-full max-w-md p-6 transform transition-all">
      <h2 class="text-xl font-bold text-gray-800 mb-3 text-center">
        {{ title }}
      </h2>

      <p class="text-gray-600 text-sm mb-6 text-center leading-relaxed" v-html="message"></p>

      <div class="flex justify-center gap-3">
        <button @click="$emit('cancel')"
          class="px-5 py-2 rounded-lg font-semibold border border-gray-300 text-gray-700 hover:bg-gray-100 transition">
          {{ cancelText }}
        </button>
        <button @click="$emit('confirm')"
          class="px-5 py-2 rounded-lg font-semibold bg-red-500 text-white hover:bg-red-600 transition">
          {{ confirmText }}
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  isOpen: {
    type: Boolean,
    required: true,
  },
  title: {
    type: String,
    required: true,
  },
  message: {
    type: String,
    required: true,
  },
  confirmText: {
    type: String,
    default: 'Ya, Konfirmasi',
  },
  cancelText: {
    type: String,
    default: 'Batal',
  },
});

// Mendefinisikan events yang dapat di-emit oleh komponen
defineEmits(['confirm', 'cancel']);
</script>

<style scoped>
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
.animate-fadeIn {
  animation: fadeIn 0.25s ease-out forwards;
}
</style>
