<script setup lang="ts">
withDefaults(
  defineProps<{
    title: string;
    message: string;
    confirmLabel?: string;
    danger?: boolean;
  }>(),
  {
    confirmLabel: "Delete",
    danger: true,
  }
);

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

<template>
  <teleport to="body">
    <div class="modal-overlay" @click="emit('cancel')">
      <div class="modal-card" @click.stop>
        <h3 class="modal-title">{{ title }}</h3>
        <p class="modal-message">{{ message }}</p>
        <div class="modal-actions">
          <button class="modal-btn" @click="emit('cancel')">Cancel</button>
          <button
            :class="['modal-btn', { 'modal-btn-danger': danger }]"
            @click="emit('confirm')"
          >{{ confirmLabel }}</button>
        </div>
      </div>
    </div>
  </teleport>
</template>
