<script lang="ts">
	let { title, description = '', children } = $props<{
		title: string;
		description?: string;
		children?: import('svelte').Snippet;
	}>();
</script>

<div class="flex items-center justify-between mb-8">
	<div class="animate-fade-slide-in">
		<h2 class="text-2xl font-semibold tracking-tight">{title}</h2>
		{#if description}
			<p class="text-sm mt-1.5" style="color: var(--color-muted-foreground);">{description}</p>
		{/if}
	</div>
	{#if children}
		<div class="animate-fade-slide-in" style="animation-delay: 60ms;">
			{@render children()}
		</div>
	{/if}
</div>
