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

	interface Props {
		coord?: string;
		eyebrow: string;
		title: string;
		titleHtml?: Snippet;
		lede?: string;
		align?: 'left' | 'center';
	}
	let { coord, eyebrow, title, titleHtml, lede, align = 'left' }: Props = $props();
</script>

<div
	style="text-align:{align};max-width:{align === 'center' ? 720 : 760}px;margin-inline:{align ===
	'center'
		? 'auto'
		: 0}"
>
	<div
		style="display:flex;align-items:center;gap:14px;justify-content:{align === 'center'
			? 'center'
			: 'flex-start'};margin-bottom:18px"
	>
		{#if coord}<span class="coord">{coord}</span>{/if}
		<span class="eyebrow">{eyebrow}</span>
	</div>
	<h2 class="display" style="font-size:clamp(34px, 5vw, 58px)">
		{#if titleHtml}{@render titleHtml()}{:else}{title}{/if}
	</h2>
	{#if lede}
		<p class="lede" style="margin-top:18px;margin-inline:{align === 'center' ? 'auto' : 0}">{lede}</p>
	{/if}
</div>
