<script lang="ts">
	let {
		label,
		title,
		subtitle = ''
	}: {
		label: string;
		title: string;
		subtitle?: string;
	} = $props();
</script>

<div class="page-header">
	<p class="page-label">{label}</p>
	<h1 class="page-title">{title}</h1>
	{#if subtitle}
		<p class="page-subtitle">{subtitle}</p>
	{/if}
</div>

<style>
	.page-header {
		margin-bottom: var(--section-gap, 24px);
	}

	.page-label {
		font-size: var(--text-sm);
		font-weight: 500;
		color: var(--text-3);
		text-transform: uppercase;
		letter-spacing: 0.05em;
		margin-bottom: var(--sp-1);
	}

	.page-title {
		font-size: var(--text-2xl);
		font-weight: 300;
		color: var(--text-1);
		line-height: 1.2;
	}

	.page-subtitle {
		font-size: var(--text-base);
		color: var(--text-3);
		margin-top: var(--sp-1);
	}
</style>
