---
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: "Github",
		link: "https://github.com/ignaciops",
		name: "mdi:github",
	},
	{
		friendlyName: "LinkedIn",
		link: "https://linkedin.com/in/ignaciops",
		name: "mdi:linkedin",
	},
	{
		friendlyName: "X",
		link: "https://x.com/ignaciopsdev",
		name: "mdi:twitter",
	},
	
];
---

<div class="flex flex-wrap items-end gap-x-2">
	<p>Encuéntrame en</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="inline-block hover:text-link drop-shadow-[0px_2.5px_2.5px_rgba(0,0,0,0.175)]"
						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>
