<script setup lang="ts">
import type { ConfirmationModalProps } from '../../types'

withDefaults(defineProps<ConfirmationModalProps>(), {
  confirmLabel: 'Confirm',
  cancelLabel: 'Cancel',
  confirmColor: 'primary',
  isLoading: false
})

const isOpen = defineModel<boolean>('open', { required: true })

const emit = defineEmits<{
  (e: 'confirm'): void
  (e: 'cancel'): void
}>()

const handleConfirm = () => {
  emit('confirm')
}

const handleCancel = () => {
  emit('cancel')
  isOpen.value = false
}
</script>

<template>
  <UModal
    v-model:open="isOpen"
    :title="title"
  >
    <template #body>
      <div class="p-4">
        <p class="text-muted">
          {{ description }}
        </p>
        <p
          v-if="itemName"
          class="mt-2 font-medium"
        >
          {{ itemName }}
        </p>
      </div>
    </template>
    <template #footer>
      <div class="flex gap-2 justify-end">
        <UButton
          color="neutral"
          variant="outline"
          :label="cancelLabel"
          @click="handleCancel"
        />
        <UButton
          :color="confirmColor"
          :label="confirmLabel"
          :icon="confirmIcon"
          :loading="isLoading"
          @click="handleConfirm"
        />
      </div>
    </template>
  </UModal>
</template>
