---
import { getSocial } from "@/data/constants";

const items = ["email", "rss", "github", "atproto"].map(
	(key) => getSocial(key)!,
);
---

<div class="flex flex-wrap items-center gap-x-4 sm:items-center">
	<p class="pb-2">Find me on</p>
	<ul class="flex flex-1 items-center gap-x-4 sm:flex-initial">
		{
			items.map((link) => (
				<li>
					<a
						class="inline-block p-2 sm:hover:text-link"
						href={link.href}
						target={link.external ? "_blank" : undefined}
						rel={link.external ? "noopener noreferrer" : undefined}
					>
						<Fragment set:html={link.icon} />
						<span class="sr-only">{link.name}</span>
					</a>
				</li>
			))
		}
	</ul>
</div>