<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'
import '@/assets/styles.css'

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>
.actions {
  display: flex;
  gap: 3rem;
  justify-content: center;
  margin-top: 0.5rem;
  margin-bottom: 0.4rem;
}
.actions .btn {
  padding: 1rem 2.2rem;
  font-weight: 700;
  font-size: 1.25rem;
  min-width: 120px;
}
</style>
