<script setup>
defineProps({
    show: Boolean,
    title: { type: String, default: 'Confirmer la suppression' },
    message: { type: String, default: 'Cette action est irréversible.' },
    confirmLabel: { type: String, default: 'Supprimer' },
    processing: Boolean,
})

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

<template>
    <Transition enter-from-class="opacity-0" enter-active-class="transition-opacity duration-150"
        leave-to-class="opacity-0" leave-active-class="transition-opacity duration-150">
        <div v-if="show" class="fixed inset-0 z-50 flex items-center justify-center">
            <div class="absolute inset-0 bg-black/50" @click="$emit('cancel')" />
            <div class="relative w-full max-w-md rounded-xl bg-white p-6 shadow-xl mx-4">
                <h3 class="text-lg font-semibold text-gray-900">{{ title }}</h3>
                <p class="mt-2 text-sm text-gray-600">{{ message }}</p>
                <div class="mt-6 flex justify-end gap-3">
                    <button @click="$emit('cancel')"
                        class="rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors">
                        Annuler
                    </button>
                    <button @click="$emit('confirm')" :disabled="processing"
                        class="rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700 disabled:opacity-50 transition-colors">
                        {{ processing ? 'Suppression...' : confirmLabel }}
                    </button>
                </div>
            </div>
        </div>
    </Transition>
</template>
