---
const { gap = 4 } = Astro.props

import { icon, library } from '@fortawesome/fontawesome-svg-core'
import { faBluesky, faGithub, faMastodon, faReddit, faXTwitter } from '@fortawesome/free-brands-svg-icons'

library.add(faMastodon, faBluesky, faGithub, faXTwitter, faReddit)
const Mastodon = icon({ prefix: 'fab', iconName: 'mastodon' })
const Bluesky = icon({ prefix: 'fab', iconName: 'bluesky' })
const Github = icon({ prefix: 'fab', iconName: 'github' })
const XTwitter = icon({ prefix: 'fab', iconName: 'x-twitter' })
const Reddit = icon({ prefix: 'fab', iconName: 'reddit' })
---

<ul class={`flex items-center opacity-80 gap-${gap}`}>
  <li>
    <a
      href="https://github.com/zen-browser"
      target="_blank"
      class="font-bold"
      aria-label="Visit Zen Browser on GitHub"
    >
      <Fragment set:html={Github.html} />
    </a>
  </li>
  <li>
    <a
      href="https://x.com/zen_browser"
      target="_blank"
      class="font-normal"
      aria-label="Visit Zen Browser on X"
    >
      <Fragment set:html={XTwitter.html} />
    </a>
  </li>
  <li>
    <a
      href="https://floss.social/@zenbrowser"
      target="_blank"
      class="font-normal"
      aria-label="Visit Zen Browser on Mastodon"
    >
      <Fragment set:html={Mastodon.html} />
    </a>
  </li>
  <li>
    <a
      href="https://bsky.app/profile/zen-browser.app"
      target="_blank"
      class="font-normal"
      aria-label="Visit Zen Browser on Bluesky"
    >
      <Fragment set:html={Bluesky.html} />
    </a>
  </li>
  <li>
    <a
      href="https://www.reddit.com/r/zen_browser"
      target="_blank"
      class="font-normal"
      aria-label="Visit Zen Browser on Reddit"
    >
      <Fragment set:html={Reddit.html} />
    </a>
  </li>
</ul>
