<template>
  <teleport to="body">
    <div
      v-if="confirmState.open"
      class="fixed inset-0 z-[1200] flex items-center justify-center bg-black/60 backdrop-blur-sm"
      @click.self="handleCancel"
    >
      <div class="bg-base-100 rounded-box shadow-xl w-full max-w-md mx-4 p-6 space-y-4">
        <h3 class="font-bold text-lg">
          {{ confirmState.title }}
        </h3>

        <p class="whitespace-pre-line text-base-content/80">
          {{ confirmState.message }}
        </p>

        <div class="flex justify-end gap-2 pt-2">
          <button
            class="btn btn-ghost btn-sm"
            @click="handleCancel"
          >
            {{ confirmState.cancelText }}
          </button>
          <button
            class="btn btn-sm"
            :class="confirmState.dangerous ? 'btn-error' : 'btn-primary'"
            @click="handleConfirm"
          >
            {{ confirmState.confirmText }}
          </button>
        </div>
      </div>
    </div>
  </teleport>
</template>

<script setup lang="ts">
import { useConfirm } from '~/composables/useConfirm'

const { confirmState, handleConfirm, handleCancel } = useConfirm()
</script>
