---
import { Icon } from "astro-icon/components";

/** 
	Uses https://www.astroicon.dev/getting-started/
	Find icons via guide: https://www.astroicon.dev/guides/customization/#open-source-icon-sets
	Only installed pack is: @iconify-json/mdi
*/
const socialLinks: {
	friendlyName: string;
	isWebmention?: boolean;
	link: string;
	name: string;
}[] = [
	{
		friendlyName: "Mastodon",
		link: "https://mastodon.social/@dawid@social.craftknight.com",
		name: "mdi:mastodon",
	},
	{
		friendlyName: "Codeberg",
		link: "https://codeberg.org/knightdave",
		name: "mdi:git",
	},
	{
		friendlyName: "RSS",
		link: "https://www.rycerz.xyz/rss.xml",
		name: "mdi:rss",
	},
	{
		friendlyName: "GitHub",
		link: "https://github.com/knightdave",
		name: "mdi:github",
	},
	{
		friendlyName: "GitLab",
		link: "https://gitlab.com/knightdave",
		name: "mdi:gitlab",
	},
	{
		friendlyName: "LinkedIn",
		link: "https://www.linkedin.com/in/rycerzxyz",
		name: "mdi:linkedin",
	},
];
---

<div class="flex flex-wrap items-end gap-x-2">
	<p>Find me on</p>
	<ul class="flex flex-1 items-center gap-x-2 sm:flex-initial">
		{
			socialLinks.map(({ friendlyName, isWebmention, link, name }) => (
				<li class="flex">
					<a
						class="hover:text-link inline-block"
						href={link}
						rel={`noreferrer ${isWebmention ? "me authn" : ""}`}
						target="_blank"
					>
						<Icon aria-hidden="true" class="h-8 w-8" focusable="false" name={name} />
						<span class="sr-only">{friendlyName}</span>
					</a>
				</li>
			))
		}
	</ul>
</div>