---
import { buttonVariants } from '@/components/ui/button'
import Link from '@components/Link.astro'
import { SITE } from '@consts'
import { Github, Linkedin, Mail, Rss, Twitter } from 'lucide-react'
---

<ul class="not-prose flex flex-wrap gap-2" role="list">
  <li>
    <Link
      href="#"
      aria-label="Twitter"
      title="Twitter"
      class={buttonVariants({ variant: 'outline', size: 'icon' })}
    >
      <Twitter className="size-4" />
    </Link>
  </li>
  <li>
    <Link
      href="#"
      aria-label="GitHub"
      title="GitHub"
      class={buttonVariants({ variant: 'outline', size: 'icon' })}
    >
      <Github className="size-4" />
    </Link>
  </li>
  <li>
    <Link
      href="#"
      aria-label="LinkedIn"
      title="LinkedIn"
      class={buttonVariants({ variant: 'outline', size: 'icon' })}
    >
      <Linkedin className="size-4" />
    </Link>
  </li>
  <li>
    <Link
      href="#"
      aria-label="Email"
      title="Email"
      class={buttonVariants({ variant: 'outline', size: 'icon' })}
    >
      <Mail className="size-4" />
    </Link>
  </li>
  <li>
    <Link
      href={`${SITE.SITEURL}/rss.xml`}
      aria-label="RSS feed"
      title="RSS feed"
      class={buttonVariants({ variant: 'outline', size: 'icon' })}
    >
      <Rss className="size-4" />
    </Link>
  </li>
</ul>