<script lang="ts">
	import type { Snippet } from 'svelte';
	import { MediaQuery } from 'svelte/reactivity';
	import HoverIcon from './HoverIcon.svelte';
	import { isLinkLocal, tryGetIcon } from '$lib/util/LinkResolver';

	let {
		href,
		class: klass = '',
		customIcon = null,
		children
	}: { href: string; class?: string; customIcon?: string | null; children: Snippet } = $props();

	const iconSrc = $derived(customIcon ?? tryGetIcon(href));

	const sm = new MediaQuery('width >= 40rem', false);
</script>

<a
	{href}
	class="{klass} group inline-block no-underline"
	target={isLinkLocal(href) ? '_self' : '_blank'}
>
	<span
		class="inline-block size-6 rounded-sm bg-emerald-800 p-0.5 align-bottom transition-all group-hover:scale-110 sm:size-8 sm:rounded-xl sm:p-1"
	>
		<HoverIcon src={iconSrc} size={sm.current ? 24 : 20} />
	</span>
	<span class="text-emerald-900 underline">
		{@render children()}
	</span>
</a>
