---
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: "Email",
		link: "mailto:work@kazoottt.top",
		name: "mdi:email",
	},
	{
		friendlyName: "GitHub",
		link: "https://github.com/kazoottt",
		name: "mdi:github",
	},
	{
		friendlyName: "Twitter",
		link: "https://x.com/kazoottt",
		name: "mdi:twitter",
	},
	{
		friendlyName: "YouTube",
		link: "https://www.youtube.com/@kazoottt255",
		name: "mdi:youtube",
	},
	{
		friendlyName: "Photo",
		link: "https://unsplash.com/@kazoottt",
		name: "mdi:camera",
	},
	{
		friendlyName: "汇总",
		link: "https://bento.me/KazooTTT",
		name: "mdi:open-in-new",
	},
	{
		friendlyName: "rss",
		link: "https://blog.kazoottt.top/rss.xml",
		name: "mdi:rss-box",
	},
];
---

<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-6 w-6" focusable="false" name={name} />
						<span class="sr-only">{friendlyName}</span>
					</a>
				</li>
			))
		}
	</ul>
</div>