<template>
  <div
    v-if="isOpen"
    class="fixed inset-0 bg-black/50 flex items-center justify-center z-[9999]"
  >
    <div
      class="bg-white rounded-lg shadow-lg p-6 w-[350px] text-center relative"
    >
      <!-- Judul -->
      <p class="text-lg font-semibold mb-2">{{ props.title }}?</p>

      <!-- Deskripsi tambahan -->
      <p class="text-sm text-gray-600 mb-4">
        {{ props.message }}
      </p>

      <!-- Tombol aksi -->
      <div class="flex justify-center gap-3">
        <button
          @click="$emit('cancel')"
          class="bg-gray-300 px-4 py-2 rounded hover:bg-gray-400"
        >
          Batal
        </button>
        <button
          @click="$emit('confirm')"
          class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600"
        >
          Hapus
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  isOpen: Boolean,
  title:String,
  message:String
});
</script>
