<script setup>
defineProps({
    id: { type: String, default: '' },
    title: { type: String, required: true },
    subtitle: { type: String, default: '' }
});
</script>

<template>
    <div :id="id" class="card scroll-mt-4">
        <div class="flex items-start justify-between mb-4 gap-2">
            <div>
                <h2 class="text-base font-bold text-surface-900 dark:text-surface-0 tracking-tight">{{ title }}</h2>
                <p v-if="subtitle" class="text-xs text-surface-500 dark:text-surface-400 mt-0.5">{{ subtitle }}</p>
            </div>
            <slot name="actions" />
        </div>
        <div class="border-t border-surface-200 dark:border-surface-700 pt-4">
            <slot />
        </div>
    </div>
</template>
