<script lang="ts">
    import type { Snippet } from "svelte";

    const {
        title,
        children,
        unsized = false,
    }: {
        title: string;
        children: Snippet;
        unsized?: boolean;
    } = $props();
</script>

<div class="flex flex-col gap-1 {unsized ? '' : 'w-72 m-4'}">
    <div class="bg-gray-100 text-black font-bold px-2 rounded uppercase">
        {title}
    </div>
    <div class="border border-gray-600 rounded p-2 flex flex-col gap-2 bg-slate-900">
        {@render children()}
    </div>
</div>
