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

	interface Props {
		title?: string;
		empty: boolean;
		emptyMessage: string;
		listClass?: string;
		header?: Snippet;
		footer?: Snippet;
		children: Snippet;
	}

	let {
		title,
		empty,
		emptyMessage,
		listClass = "flex flex-col gap-4",
		header,
		footer,
		children
	}: Props = $props();
</script>

<section>
	{#if title}
		<h2 class="px-2 pb-4 typography-paragraph-large font-medium">{title}</h2>
	{/if}
	{@render header?.()}
	{#if empty}
		<EmptyState message={emptyMessage} />
	{:else}
		<div class={listClass}>
			{@render children()}
		</div>
		{@render footer?.()}
	{/if}
</section>
