<template>
    <MalioModal
        :model-value="modelValue"
        modal-class="max-w-md"
        @update:model-value="$emit('update:modelValue', $event)"
    >
        <template #header>
            <h2 class="text-[24px] font-bold">{{ title }}</h2>
        </template>
        <!-- Corps : slot par défaut pour permettre du texte enrichi (nom en gras
             via <i18n-t>) ; sinon repli sur le message texte simple. -->
        <slot>
            <p>{{ message }}</p>
        </slot>
        <template #footer>
            <MalioButton
                variant="secondary"
                button-class="flex-1"
                :label="cancelLabel ?? $t('common.cancel')"
                @click="$emit('update:modelValue', false)"
            />
            <MalioButton
                :variant="confirmVariant"
                button-class="flex-1"
                :label="confirmLabel ?? $t('common.delete')"
                @click="$emit('confirm')"
            />
        </template>
    </MalioModal>
</template>

<script setup lang="ts">
withDefaults(
    defineProps<{
        modelValue: boolean
        title: string
        message?: string
        confirmLabel?: string
        cancelLabel?: string
        confirmVariant?: 'primary' | 'secondary' | 'tertiary' | 'danger'
    }>(),
    {
        message: undefined,
        confirmLabel: undefined,
        cancelLabel: undefined,
        confirmVariant: 'danger',
    },
)

defineEmits<{
    (e: 'update:modelValue', value: boolean): void
    (e: 'confirm'): void
}>()
</script>
