<script setup lang="ts">
defineProps<{
  title: string
  message: string
  detail?: string
  confirmLabel?: string
  cancelLabel?: string
  variant?: 'warning' | 'danger' | 'info'
}>()

const emit = defineEmits<{
  confirm: []
  cancel: []
}>()
</script>

<template>
  <div class="fixed inset-0 bg-black/60 flex items-center justify-center z-50" @click.self="emit('cancel')">
    <div class="bg-dark-800 border border-dark-600 rounded-lg p-5 max-w-lg w-full mx-4 shadow-2xl">
      <div class="flex items-center gap-2 mb-3">
        <span :class="[
          'w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold',
          variant === 'danger' ? 'bg-red-600' : variant === 'warning' ? 'bg-yellow-600' : 'bg-primary-600'
        ]">!</span>
        <h3 class="font-semibold text-sm">{{ title }}</h3>
      </div>
      <p class="text-dark-300 text-sm mb-3">{{ message }}</p>
      <pre v-if="detail" class="bg-dark-900 border border-dark-600 rounded p-3 text-xs text-dark-400 whitespace-pre-wrap mb-4 max-h-48 overflow-y-auto">{{ detail }}</pre>
      <div class="flex gap-3 justify-end">
        <button @click="emit('cancel')" class="px-4 py-1.5 bg-dark-600 hover:bg-dark-500 text-dark-300 text-sm rounded font-medium transition-colors">
          {{ cancelLabel || 'Cancel' }}
        </button>
        <button @click="emit('confirm')" :class="[
          'px-4 py-1.5 text-white text-sm rounded font-medium transition-colors',
          variant === 'danger' ? 'bg-red-600 hover:bg-red-500' : 'bg-green-600 hover:bg-green-500'
        ]">
          {{ confirmLabel || 'Approve' }}
        </button>
      </div>
    </div>
  </div>
</template>
