---
import Link from "@/components/Link.astro";
import { buttonVariants } from "@/components/ui/button";
import { ICON_MAP } from "@/consts";
import type { SocialLink } from "@/types";
import { Icon } from "astro-icon/components";

interface Props {
	links: SocialLink[];
}

const { links } = Astro.props;
---

<ul class="flex flex-wrap gap-2" role="list">
  {
    links.map(({ href, label }) => (
      <li>
        <Link
          href={href}
          aria-label={label}
          title={label}
          class={buttonVariants({ variant: 'outline', size: 'icon' })}
          external
        >
          <Icon
            name={
              ICON_MAP[label as keyof typeof ICON_MAP] ||
              'lucide:message-circle-question'
            }
            class="size-4"
          />
        </Link>
      </li>
    ))
  }
</ul>