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

	interface Props {
		h?: `${1 | 2 | 3 | 4 | 5 | 6}`;
		id: string;
		children: Snippet;
		class?: ClassValue | null;
	}

	let { h = '1', id, children, class: className }: Props = $props();

	const tag = $derived('h' + h);
	const href = $derived('#' + id);
	const sign = $derived.by(() => {
		switch (h) {
			case '1':
				return '';
			case '2':
				return '§ ';
			default:
				return '¶ ';
		}
	});
</script>

<svelte:element this={tag} {id} class={className}>
	<!-- eslint-disable svelte/no-navigation-without-resolve -->
	<a {href}>{sign} {@render children()}</a>
</svelte:element>
