<script lang="ts">
	import type { Snippet } from "svelte";
	import LayerCard from "#lib/components/ui/LayerCard.svelte";
	import LayerCardPrimary from "#lib/components/ui/LayerCardPrimary.svelte";
	import LayerCardSecondary from "#lib/components/ui/LayerCardSecondary.svelte";

	let {
		header,
		children,
		footer,
		padded = true
	}: { header: Snippet; children: Snippet; footer?: Snippet; padded?: boolean } = $props();
</script>

<LayerCard class="defer-render-40">
	<LayerCardSecondary class="flex-wrap gap-word px-[calc(var(--spacing-sm)+1px)]">
		{@render header()}
	</LayerCardSecondary>
	<LayerCardPrimary padding={padded ? "small" : "none"}>
		{@render children()}
	</LayerCardPrimary>
	{@render footer?.()}
</LayerCard>