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

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

<header class="flex items-start gap-4 px-4 pb-4 pt-6 md:px-6 md:pb-6 md:pt-8">
	<div class="min-w-0 flex-1">
		<p
			data-testid="masthead-label"
			class="mb-1 text-[13px] font-semibold uppercase tracking-[0.05em] text-text-secondary"
		>
			{label}
		</p>
		<h1
			data-testid="masthead-title"
			class="text-[26px] md:text-[32px] font-semibold leading-tight tracking-[-0.02em] text-text-primary"
		>
			{title}
		</h1>
		{#if meta}
			<div class="mt-1.5 text-[13px] text-text-secondary">{@render meta()}</div>
		{/if}
	</div>
	{#if actions}
		<div class="flex flex-shrink-0 items-center gap-1.5">{@render actions()}</div>
	{/if}
</header>
