<template>
  <BaseModal
    :show="!!user"
    aria-labelledby="delete-user-title"
    @close="$emit('close')"
  >
    <div
      v-if="user"
      class="kestrel-card-modal w-full max-w-sm p-4"
    >
      <h3
        id="delete-user-title"
        class="mb-2 text-sm font-medium text-kestrel-text"
      >
        Delete user?
      </h3>
      <p class="mb-4 text-sm text-kestrel-muted">
        Are you sure you want to delete <strong class="text-kestrel-text">{{ user.identifier }}</strong>? They will not be able to sign in again.
      </p>
      <div class="flex justify-end gap-2">
        <button
          type="button"
          class="kestrel-btn-secondary"
          @click="$emit('close')"
        >
          Cancel
        </button>
        <button
          type="button"
          class="rounded border border-red-500/60 bg-red-500/10 px-3 py-1.5 text-sm text-red-400 hover:bg-red-500/20"
          @click="$emit('confirm')"
        >
          Delete
        </button>
      </div>
    </div>
  </BaseModal>
</template>

<script setup>
defineProps({
  user: { type: Object, default: null },
})

defineEmits(['close', 'confirm'])
</script>
