<template>
  <div class="space-y-3">
    <p class="text-sm text-gray-700 break-words">{{ message }}</p>
    <div class="flex gap-3 items-center">
      <button
        type="button"
        @click="$emit('cancelled')"
        class="text-sm text-gray-600 hover:text-gray-800"
      >
        {{ cancelLabel }}
      </button>
      <button
        type="button"
        @click="$emit('confirmed')"
        class="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-semibold transition-colors min-h-[44px]"
        :class="confirmClass || 'bg-red-600 hover:bg-red-700 text-white'"
      >
        {{ confirmLabel }}
      </button>
    </div>
  </div>
</template>

<script setup>
defineProps({
  message: {
    type: String,
    required: true,
  },
  confirmLabel: {
    type: String,
    default: 'Confirm',
  },
  cancelLabel: {
    type: String,
    default: 'Cancel',
  },
  confirmClass: {
    type: String,
    default: '',
  },
})

defineEmits(['confirmed', 'cancelled'])
</script>
