<template>
  <Modal :open="!!candidate" title="Kandidat löschen?" @close="$emit('close')">
    <div class="flex items-start gap-4">
      <span class="grid h-12 w-12 shrink-0 place-items-center rounded-full bg-rose-50 text-rose-500">
        <TriangleAlert class="h-6 w-6" />
      </span>
      <p class="text-sm leading-7 text-slate-600">
        „<strong class="text-slate-800">{{ candidate?.displayName }}</strong>" wird endgültig aus diesem Award-Jahr entfernt.
        Das lässt sich nicht rückgängig machen.
      </p>
    </div>
    <template #footer>
      <Button variant="ghost" @click="$emit('close')">Abbrechen</Button>
      <Button class="!bg-rose-600 hover:!bg-rose-500" :disabled="deleting" @click="$emit('confirm')">
        {{ deleting ? 'Löscht …' : 'Endgültig löschen' }}
      </Button>
    </template>
  </Modal>
</template>

<script setup lang="ts">
import { TriangleAlert } from '@lucide/vue'

import type { AdminCandidateItem } from '../../types/awards'
import Button from '../ui/Button.vue'
import Modal from '../ui/Modal.vue'

defineProps<{
  candidate: AdminCandidateItem | null
  deleting: boolean
}>()

defineEmits<{
  close: []
  confirm: []
}>()
</script>
