---
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>