<script lang="ts">
	import { MediaQuery } from 'svelte/reactivity';
	import HoverIcon from './HoverIcon.svelte';

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

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

	let url: URL;
	let host: string;

	const icons: Record<string, string> = {
		none: 'material-symbols:link',
		'steamcommunity.com': 'simple-icons:steam',
		'twitter.com': 'simple-icons:x',
		'x.com': 'simple-icons:x',
		'github.com': 'simple-icons:github',
		'youtube.com': 'simple-icons:youtube',
		'itch.io': 'simple-icons:itchdotio',
		'discord.gg': 'simple-icons:discord',
		'gamebanana.com': 'simple-icons:gamebanana',
		// https://хамяк.рф
		'xn--80auf8a2c.xn--p1ai': 'fluent-emoji-high-contrast:hamster',
		'teasanctuary.ru': '/icons/tea-sanctuary.svg',
		'hl.teasanctuary.ru': '/icons/half-life.svg',
		localhost: '/icons/tea-sanctuary.svg',
		email: 'material-symbols:alternate-email'
	};

	function getHost(url: URL) {
		const isEmail = url.href.startsWith('mailto:');
		const hostname = isEmail ? 'email' : url.hostname;
		// const split = hostname.split('.');
		// const name = split[Math.max(split.length - 2, 0)];
		// if (split.length > 1) return `${name}.${split[split.length - 1]}`;

		// return name;
		return hostname;
	}

	function tryGetIcon(link: string) {
		try {
			url = new URL(link);
			host = getHost(url).replace(/\.com$/, '');
		} catch {
			return icons['none'];
		}

		let domain = getHost(url).toLocaleLowerCase();
		let key = Object.keys(icons).find((key) => key == domain);
		if (key == null) return icons['none'];

		return icons[key];
	}
</script>

<a {href} class="{className} inline-block group" target="_blank">
	<span class="inline-block {sm.current ? 'size-8 rounded-xl p-1' : 'size-6 rounded-sm p-0.5'} bg-emerald-800 align-bottom transition-all group-hover:scale-110">
		<HoverIcon
			src={customIcon ?? tryGetIcon(href)}
			text={host}
			size={sm.current ? 24 : 20}
		/>
	</span>
	<span class="text-emerald-900 underline">
		<slot />
	</span>
</a>

<style></style>