<!-- ~/components/global/GlobalConfirm.vue -->
<template>
  <Teleport to="body">
    <div
      v-if="state.isOpen"
      class="fixed inset-0 z-[1001] flex items-center justify-center bg-black/40 pointer-events-auto"
      @click="actions.ucoCancelConfirmModal"
    >
      <div
        class="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 max-w-sm w-full mx-4 pointer-events-auto"
        @click.stop
      >
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
          {{ state.title }}
        </h3>
        <p class="text-gray-600 dark:text-gray-300 mb-6">
          {{ state.message }}
        </p>
        <div class="flex justify-end gap-3">
          <button
            type="button"
            class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-md dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 transition pointer-events-auto"
            @click="actions.ucoCancelConfirmModal"
          >
            انصراف
          </button>
          <button
            type="button"
            class="px-4 py-2 text-sm font-medium text-white bg-primary hover:bg-primary-700 rounded-md transition pointer-events-auto"
            @click="actions.ucoConfirm"
          >
            تأیید
          </button>
        </div>
      </div>
    </div>
  </Teleport>
</template>

<script setup>
import { useConfirmState, useConfirmActions } from "@/composables/useConfirm";

const state = useConfirmState();
const actions = useConfirmActions();
</script>
