<script lang="ts">
	import type { Snippet } from 'svelte';

	interface Props {
		title: string;
		description?: string;
		children?: Snippet;
	}

	let { title, description, children }: Props = $props();
</script>

<div class="page-header mb-6">
	<div class="flex items-start justify-between gap-4">
		<div>
			<h1 class="text-2xl font-bold text-base-content">{title}</h1>
			{#if description}
				<p class="text-base-content/70 mt-1">{description}</p>
			{/if}
		</div>
		{#if children}
			<div class="flex items-center gap-2">
				{@render children()}
			</div>
		{/if}
	</div>
</div>
