<script setup lang="ts">
const props = defineProps({
  message: { type: String, required: true },
  callback: { type: Function, required: true },
})

const handleConfirm = (result: boolean) => {
  props.callback(result);
}
</script>

<template>
  <div class="flex fixed inset-0 z-[1000] flex items-center justify-center  p-4 bg-black/50 !bg-opacity-10!">
    <div class="flex bg-white rounded-2xl shadow-xl max-w-sm w-full p-6 flex-col gap-5">
      <!-- Сообщение -->
      <div class="flex text-center mb-6">
        <span class="text-lg font-semibold text-gray-900">
          {{ message }}
        </span>
      </div>

      <!-- Кнопки -->
      <div class="flex gap-3">
        <button
            @click="handleConfirm(false)"
            class="flex-1 py-3 px-4 border border-gray-300 rounded-xl text-gray-700 font-medium hover:bg-gray-50 active:bg-gray-100 transition-colors"
        >
          Cancel
        </button>
        <button
            @click="handleConfirm(true)"
            class="flex-1 py-3 px-4 bg-blue-500 text-white rounded-xl font-medium hover:bg-blue-600 active:bg-blue-700 transition-colors"
        >
          OK
        </button>
      </div>
    </div>
  </div>
</template>