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

	interface Props {
		title: string;
		href: string;
		children?: Snippet;
	}

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

<div class="flex flex-col gap-1">
	<h2 class="flex text-2xl font-medium">
		<a class="hover:text-white" {href}>
			{title}
		</a>
	</h2>
	<div class="flex flex-wrap gap-5">
		{@render children?.()}
	</div>
</div>