<template>
    <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
        <div class="flex items-center gap-2 mb-3">
            <component :is="icon" v-if="icon" class="w-5 h-5 text-blue-500 shrink-0" />
            <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300">{{ title }}</h3>
        </div>
        <slot />
    </div>
</template>

<script setup>
defineProps({
    title: {
        type: String,
        required: true,
    },
    icon: {
        type: [Object, Function],
        default: null,
    },
});
</script>
