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

	let {
		title,
		kicker,
		subtitle,
		backHref,
		backLabel,
		className = '',
		titleClassName = 'editorial-title',
		meta,
		actions,
		children
	}: {
		title: string;
		kicker?: string;
		subtitle?: string;
		backHref?: string;
		backLabel?: string;
		className?: string;
		titleClassName?: string;
		meta?: Snippet;
		actions?: Snippet;
		children?: Snippet;
	} = $props();
</script>

<section class={`editorial-hero reveal-1 ${className}`.trim()}>
	{#if backHref && backLabel}
		<a href={backHref} class="editorial-backlink"><ArrowLeft class="size-4" /> {backLabel}</a>
	{/if}

	{#if kicker}
		<p class="editorial-kicker">{kicker}</p>
	{/if}

	<h1 class={titleClassName}>{title}</h1>

	{#if subtitle}
		<p class="editorial-subtitle">{subtitle}</p>
	{/if}

	{#if meta}
		<div class="page-header-meta">
			{@render meta()}
		</div>
	{/if}

	{#if actions}
		<div class="editorial-toolbar">
			{@render actions()}
		</div>
	{/if}

	{#if children}
		<div class="page-header-foot">
			{@render children()}
		</div>
	{/if}
</section>
