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

	let {
		title,
		description,
		actions,
	}: {
		title: string;
		description?: string;
		actions?: Snippet;
	} = $props();
</script>

<div class="saas-toolbar">
	<div class="min-w-0">
		<h1 class="saas-page-title">{title}</h1>
		{#if description}
			<p class="saas-muted mt-1">{description}</p>
		{/if}
	</div>
	{#if actions}
		<div class="ml-auto flex flex-wrap items-center gap-2">
			{@render actions()}
		</div>
	{/if}
</div>
