<script lang="ts">
	interface Props {
		children: import('svelte').Snippet;
		emoji?: string;
	}
	let { children, emoji }: Props = $props();
</script>

<div class="section-head">
	{#if emoji}<span class="emoji">{emoji}</span>{/if}
	<span class="label">{@render children()}</span>
</div>

<style>
	.section-head {
		display: flex;
		align-items: center;
		gap: 5px;
		padding: 0 16px 6px;
	}
	.emoji {
		font-size: 14px;
	}
	.label {
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.6px;
		text-transform: uppercase;
		color: var(--ink-2);
	}
</style>
