<script lang="ts">
	export let title: string;
	const anchorTitle = `#${title.trim().replaceAll(' ', '').toLocaleLowerCase()}`;
</script>

<div class="flex flex-col gap-1 mt-3">
	<p class="text-2xl relative group font-bold text-text mb-2">
		<h id={anchorTitle}>{title}</h>
		<span
			class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-7 rtl:-right-7 not-prose group-hover:opacity-100 text-neutral-700"
			><a
				class="group-hover:text-primary-300"
				style="text-decoration-line: none !important;"
				href={anchorTitle}
				aria-label="Гачок">#</a
			></span
		>
	</p>
	<slot />
</div>
