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

	interface Props {
		title: string;
		description?: string;
		/** right-aligned control that sits on the title's baseline row */
		action?: Snippet;
	}

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

<div class="flex w-full flex-col justify-center gap-4">
	<div class="flex items-start justify-between gap-4">
		<h1 class="typography-heading-2 text-foreground-default">{title}</h1>
		{#if action}
			{@render action()}
		{/if}
	</div>
	{#if description}
		<p class="typography-paragraph-regular text-foreground-muted">{description}</p>
	{/if}
</div>
