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

	export let href: string;
	let className: string = '';
	export { className as class };
	export let customIcon: string | null = null;

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

<a {href} class="{className} 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={customIcon ?? tryGetIcon(href)} size={sm.current ? 24 : 20} />
	</span>
	<span class="text-emerald-900 underline">
		<slot />
	</span>
</a>

<style></style>
