<script lang="ts">
	import type { Snippet } from "svelte";
	import Card from "$lib/components/ui/Card.svelte";

	let { header, children }: { header: Snippet; children: Snippet } = $props();
</script>

<Card border shadow background padding="none">
	<div
		class="flex flex-wrap items-center gap-2 border-b border-border-default px-6 py-3 typography-paragraph-small text-foreground-muted"
	>
		{@render header()}
	</div>
	<div class="px-6 py-4">
		{@render children()}
	</div>
</Card>
