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

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

<a
	{href}
	class="{className} flex flex-row drop-shadow-2xl transition-all hover:scale-110"
	target={isLinkLocal(href) ? '_self' : '_blank'}
>
	<div class="shrink-0 rounded-l-xl bg-slate-800 p-2">
		<HoverIcon src={customIcon ?? tryGetIcon(href)} class="text-sm uppercase" />
	</div>
	<div
		class="flex shrink-0 grow flex-nowrap items-center justify-center rounded-r-xl bg-slate-100 p-2 text-2xl text-nowrap text-slate-950"
	>
		<slot />
	</div>
</a>