<script lang="ts">
	import '../app.css';

	import SiOsu from '~icons/simple-icons/osu';
	import SiSteam from '~icons/simple-icons/steam';
	import SiTwitch from '~icons/simple-icons/twitch';
	import SiSpotify from '~icons/simple-icons/spotify';
	import SiGithub from '~icons/simple-icons/github';
	import SiYoutube from '~icons/simple-icons/youtube';
	import SiLinkedin from '~icons/simple-icons/linkedin';
	import SiInstagram from '~icons/simple-icons/instagram';
	import SiX from '~icons/simple-icons/x';
	// import SiBluesky from '~icons/simple-icons/bluesky';
	// import SiThreads from '~icons/simple-icons/threads';
	import SiMail from '~icons/simple-icons/gmail';

	import CopyButton from '$lib/components/CopyButton.svelte';
	import SiDiscord from '~icons/simple-icons/discord';
	import SiSignal from '~icons/simple-icons/signal';
	import SiWhatsapp from '~icons/simple-icons/whatsapp';
	import { resolve } from '$app/paths';

	let { children } = $props();

	const links = [
		{ icon: SiMail, label: 'Email', href: 'mailto:stan@stanrunge.dev' },
		{ icon: SiGithub, label: 'GitHub', href: 'https://github.com/stanrunge' },
		{ icon: SiLinkedin, label: 'LinkedIn', href: 'https://linkedin.com/in/stanrunge' },
		{ icon: SiX, label: 'X', href: 'https://x.com/stanrunge' },
		{ icon: SiYoutube, label: 'YouTube', href: 'https://youtube.com/@stanrunge' },
		{ icon: SiInstagram, label: 'Instagram', href: 'https://instagram.com/stan_runge' },
		// { icon: SiBluesky, label: 'Bluesky', href: 'https://bsky.app/profile/stanrunge.bsky.social' },
		// { icon: SiThreads, label: 'Threads', href: 'https://www.threads.com/@stan_runge' },
		{ icon: SiTwitch, label: 'Twitch', href: 'https://twitch.tv/stanrunge_' },
		{
			icon: SiSpotify,
			label: 'Spotify',
			href: 'https://open.spotify.com/user/e3o3qr9z7fpsu4gur9zz4y1ld'
		},
		{ icon: SiSteam, label: 'Steam', href: 'https://steamcommunity.com/id/stanrunge' },
		{ icon: SiOsu, label: 'osu!', href: 'https://osu.ppy.sh/users/11212255' }
	];

	const copies = [
		{ icon: SiWhatsapp, label: 'WhatsApp', value: 'stanrunge' },
		{ icon: SiDiscord, label: 'Discord', value: 'stanrunge' },
		{ icon: SiSignal, label: 'Signal', value: 'stan.443' }
	];
</script>

<header class="flex justify-between items-center gap-4 py-4 px-4">
	<a href={resolve('/')} class="text-2xl font-bold">Stan Runge</a>
	<nav class="flex flex-wrap justify-center gap-4" aria-label="Social links">
		{#each copies as c (c.label)}
			<CopyButton {...c} />
		{/each}
		{#each links as { icon: Icon, label, href } (label)}
			<a {href} aria-label={label} class="text-2xl transition hover:opacity-60">
				<Icon />
			</a>
		{/each}
	</nav>
</header>

{@render children()}
