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

	interface Props {
		name: string;
		slug: string;
		children: Snippet;
	}

	let { name, slug, children }: Props = $props();
</script>

<li
	id={slug}
	class="relative flex aspect-square scroll-mt-12 items-center justify-center bg-background-default"
>
	<a
		href="#{slug}"
		class="absolute top-md left-md typography-paragraph-regular font-medium text-foreground-subtle no-underline hover:text-foreground-default hover:no-underline"
	>
		{name}
	</a>
	<div class="flex w-full items-center justify-center p-2xl">
		{@render children()}
	</div>
</li>