<template>
    <section class="danger-zone" :aria-labelledby="titleId">
        <h3 :id="titleId" class="danger-zone-title mb-2">{{ title }}</h3>
        <p class="danger-zone-copy mb-3">{{ description }}</p>
        <slot></slot>
    </section>
</template>

<script setup>
defineProps({
    titleId: {
        type: String,
        required: true,
    },
    title: {
        type: String,
        default: "Danger Zone",
    },
    description: {
        type: String,
        default: "This action is permanent and cannot be undone.",
    },
});
</script>
