<script setup lang="ts">
defineProps<{
  title: string
  message: string
  confirmText?: string
  cancelText?: string
}>()

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

<template>
  <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
    <div class="bg-surface-light dark:bg-surface-alt rounded-lg shadow-lg max-w-md w-full mx-4 p-6">
      <h3 class="text-lg font-semibold text-slate-800 dark:text-slate-200 mb-2">{{ title }}</h3>
      <p class="text-sm text-slate-600 dark:text-slate-400 mb-6">{{ message }}</p>
      <div class="flex justify-end gap-3">
        <button
          class="px-4 py-2 text-sm rounded-md border border-border-light dark:border-slate-600 text-slate-600 dark:text-slate-400 hover:bg-surface-light-elevated dark:hover:bg-surface-elevated"
          @click="emit('cancel')"
        >
          {{ cancelText || 'Cancel' }}
        </button>
        <button
          class="px-4 py-2 text-sm rounded-md bg-accent-500 text-white hover:bg-accent-600"
          @click="emit('confirm')"
        >
          {{ confirmText || 'Confirm' }}
        </button>
      </div>
    </div>
  </div>
</template>
