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

	interface Props {
		title: string;
		subtitle?: string;

		icon?: Snippet;
		actions?: Snippet;

		class?: string;
	}

	let {
		title,
		subtitle,
		icon,
		actions,
		class: className = ''
	}: Props = $props();
</script>

<div class={['mb-6', className].filter(Boolean)}>
	<div class="flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
		<div class="flex items-center gap-4">
			{#if icon}
				<div class="bg-primary/10 rounded-xl p-3">
					<div class="text-primary [&_svg]:h-8 [&_svg]:w-8">
						{@render icon()}
					</div>
				</div>
			{/if}

			<div>
				<h1 class="text-primary text-3xl font-bold">{title}</h1>
				{#if subtitle}
					<p class="text-base-content/70">{subtitle}</p>
				{/if}
			</div>
		</div>

		{#if actions}
			<div class="flex items-center gap-2">
				{@render actions()}
			</div>
		{/if}
	</div>
</div>


