---
import { SITE_TITLE } from '../config'
import HeaderLink from './HeaderLink.astro'
import GitHub from './icons/GitHub.astro'
import Mastodon from './icons/Mastodon.astro'
import GitLab from './icons/GitLab.astro'
---

<header class="mt-8">
  <h2 class="text-3xl font-semibold mb-2">
    {SITE_TITLE}
  </h2>
  <nav class="gap-2 flex items-center">
    <HeaderLink href="/">Home</HeaderLink>
    <HeaderLink href="/posts">Posts</HeaderLink>

    <div class="ml-auto space-x-2">
      <a
        class="inline-block hover:text-purple-600"
        href="https://flausch.social/@saibotk"
        target="_blank"
        aria-label="Link to my Mastodon account"
      >
        <Mastodon class="w-6" />
      </a>
      <a
        class="inline-block hover:text-purple-600"
        href="https://git.saibotk.de/saibotk"
        target="_blank"
        aria-label="Link to my Gitlab account"
      >
        <GitLab class="w-6" />
      </a>
      <a
        class="inline-block hover:text-purple-600"
        href="https://github.com/saibotk"
        target="_blank"
        aria-label="Link to my GitHub account"
      >
        <GitHub class="w-6" />
      </a>
    </div>
  </nav>
</header>