<template>
    <MalioModal
        :model-value="modelValue"
        modal-class="max-w-md"
        @update:model-value="emit('update:modelValue', $event)"
    >
        <template #header>
            <h3 class="text-lg font-semibold text-neutral-900">
                {{ t('admin.categories.delete.title') }}
            </h3>
        </template>

        <p class="text-sm text-neutral-600">
            {{ t('admin.categories.delete.message', { name: categoryName }) }}
        </p>

        <template #footer>
            <MalioButton
                :label="t('common.cancel')"
                variant="secondary"
                @click="emit('update:modelValue', false)"
            />
            <MalioButton
                :label="t('common.delete')"
                variant="danger"
                icon-name="mdi:delete-outline"
                icon-position="left"
                :disabled="loading"
                @click="emit('confirm')"
            />
        </template>
    </MalioModal>
</template>

<script setup lang="ts">
const { t } = useI18n()

defineProps<{
    modelValue: boolean
    categoryName: string
    loading: boolean
}>()

const emit = defineEmits<{
    'update:modelValue': [value: boolean]
    confirm: []
}>()
</script>
