<template>
  <div class="modal-backdrop" v-if="show">
    <div class="modal">
      <p>{{ message }}</p>
      <div class="actions">
        <button @click="handleDelete" class="btn btn-danger" :disabled="deleting">
          {{ deleting ? 'Deleting' : 'Delete' }}
        </button>
        <button @click="handleCancel" class="btn btn-secondary" :disabled="deleting">Cancel</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

const props = defineProps<{
  show: boolean
  message?: string
}>()

const emit = defineEmits(['confirm', 'cancel'])

const deleting = ref(false)

function handleDelete() {
  deleting.value = true
  emit('confirm')
}

function handleCancel() {
  if (!deleting.value) emit('cancel')
}

// Reset deleting state when modal is closed
watch(
  () => props.show,
  (val) => {
    if (!val) deleting.value = false
  },
)
</script>

<style>
@import '@/assets/modal.css';
@import '@/assets/actions-shared.css';
</style>
