<script setup>
import DangerButton from '@/Components/DangerButton.vue';
import Modal from '@/Components/Modal.vue';
import PrimaryButton from '@/Components/PrimaryButton.vue';
import SecondaryButton from '@/Components/SecondaryButton.vue';

defineProps({
    show: {
        type: Boolean,
        default: false,
    },
    title: {
        type: String,
        default: 'Confirmer la suppression',
    },
    message: {
        type: String,
        required: true,
    },
    confirmLabel: {
        type: String,
        default: 'Supprimer',
    },
    warning: {
        type: String,
        default: 'Cette action est irréversible.',
    },
    processing: {
        type: Boolean,
        default: false,
    },
    danger: {
        type: Boolean,
        default: true,
    },
});

const emit = defineEmits(['close', 'confirm']);
</script>

<template>
    <Modal :show="show" max-width="md" @close="emit('close')">
        <div class="p-6">
            <h2 class="text-lg font-semibold text-slate-900">
                {{ title }}
            </h2>
            <p class="mt-2 text-sm text-slate-600">
                {{ message }}
            </p>
            <p v-if="warning" class="mt-2 rounded-lg bg-amber-50 px-3 py-2 text-sm text-amber-800">
                {{ warning }}
            </p>

            <div class="mt-6 flex justify-end gap-3">
                <SecondaryButton type="button" :disabled="processing" @click="emit('close')">
                    Annuler
                </SecondaryButton>
                <DangerButton v-if="danger" type="button" :disabled="processing" @click="emit('confirm')">
                    {{ confirmLabel }}
                </DangerButton>
                <PrimaryButton v-else type="button" :disabled="processing" @click="emit('confirm')">
                    {{ confirmLabel }}
                </PrimaryButton>
            </div>
        </div>
    </Modal>
</template>