---
import Link from '@/components/Link.astro'
import { buttonVariants } from '@/components/ui/button'
import type { Link as SocialLink } from '@/consts'
import { cn } from '@/lib/utils'
import { Icon } from 'astro-icon/components'

interface Props {
  links: SocialLink[]
  className?: string
}

const { links, className } = Astro.props

const iconMap = {
  Website: 'lucide:globe',
  GitHub: 'lucide:github',
  LinkedIn: 'lucide:linkedin',
  Fediverse: 'ph:fediverse-logo',
  Email: 'lucide:mail',
  RSS: 'lucide:rss',
}

const getSocialLink = ({ href, label }: SocialLink) => ({
  href: label === 'Email' ? `mailto:${href}` : href,
  ariaLabel: label,
  iconName:
    iconMap[label as keyof typeof iconMap] || 'lucide:message-circle-question',
})
---

<ul class={cn('not-prose flex flex-wrap gap-2', className)} role="list">
  {
    links.map((link) => {
      const { href, ariaLabel, iconName } = getSocialLink(link)
      return (
        <li>
          <Link
            href={href}
            aria-label={ariaLabel}
            title={ariaLabel}
            class={buttonVariants({ variant: 'outline', size: 'icon' })}
            external
          >
            <Icon name={iconName} class="size-4" />
          </Link>
        </li>
      )
    })
  }
</ul>