<template>
  <Teleport to="body">
    <div
      v-if="open"
      class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
      role="dialog"
      aria-modal="true"
      :aria-labelledby="titleId"
      data-testid="confirm-dialog"
      @keydown.esc.prevent="$emit('cancel')"
    >
      <div
        class="w-full max-w-md rounded-card border border-line bg-surface p-6 shadow-dialog"
        @click.stop
      >
        <h3 :id="titleId" class="text-lg font-semibold text-ink-strong">
          {{ title }}
        </h3>
        <p v-if="body" class="mt-2 text-sm text-ink">{{ body }}</p>
        <div v-if="$slots.default" class="mt-4">
          <slot />
        </div>
        <div class="mt-6 flex flex-col-reverse gap-3 sm:flex-row sm:justify-end">
          <button
            type="button"
            class="px-4 py-2 text-sm text-ink-secondary hover:text-ink-strong"
            @click="$emit('cancel')"
          >
            {{ cancelLabel }}
          </button>
          <button
            type="button"
            :class="variant === 'danger' ? 'btn-danger' : 'btn-primary'"
            :disabled="confirmDisabled"
            @click="$emit('confirm')"
          >
            {{ confirmLabel }}
          </button>
        </div>
      </div>
    </div>
  </Teleport>
</template>

<script setup lang="ts">
import { useId } from 'vue'

withDefaults(
  defineProps<{
    open: boolean
    title: string
    body?: string
    confirmLabel?: string
    cancelLabel?: string
    variant?: 'primary' | 'danger'
    confirmDisabled?: boolean
  }>(),
  {
    confirmLabel: 'Confirm',
    cancelLabel: 'Cancel',
    variant: 'primary',
    confirmDisabled: false,
  }
)

defineEmits<{
  (e: 'confirm'): void
  (e: 'cancel'): void
}>()

const titleId = useId()
</script>
