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

	interface Props {
		title: string;
		subtitle?: string;
		icon?: string;
		iconColor?: string;
		actions?: Snippet;
		class?: string;
	}

	let {
		title,
		subtitle,
		icon,
		iconColor = "text-white",
		actions,
		class: className = "",
	}: Props = $props();
</script>

<header
	class="flex items-center justify-between px-6 py-5 border-b border-light/5 shrink-0 {className}"
>
	<div class="flex items-center gap-3 min-w-0">
		{#if icon}
			<span
				class="material-symbols-rounded {iconColor} shrink-0"
				style="font-size: 28px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 28;"
				>{icon}</span
			>
		{/if}
		<div class="min-w-0">
			<h1 class="text-h1 font-heading text-white truncate">{title}</h1>
			{#if subtitle}
				<p class="text-body-sm text-light/50 mt-0.5">{subtitle}</p>
			{/if}
		</div>
	</div>
	{#if actions}
		<div class="flex items-center gap-2 shrink-0 ml-4">
			{@render actions()}
		</div>
	{/if}
</header>
