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

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

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

<section>
	{#if actions}
		<div class="flex items-center justify-end gap-sm px-xs pb-md">
			{#if title}
				<h2 class="mr-auto typography-paragraph-large font-medium">{title}</h2>
			{/if}
			{@render actions()}
		</div>
	{:else if title}
		<h2 class="px-xs pb-md 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>