---
import { Image } from "astro:assets";
import { discordLink } from "../constants";
import header from "../assets/header.png";
---

<header>
  <Image src={header} alt="XIVLauncher logo" class="headerLogo" />
  <a href="/">Home</a>
  <a href="/faq">FAQ</a>
  <a href={discordLink}>Discord</a>
</header>

<style>
  header,
  .headerLogo {
    height: 3rem;
  }

  header {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2ch;
    align-items: center;
    margin-bottom: 1rem;
  }

  a {
    color: var(--fg);
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
  }

  .headerLogo {
    width: auto;
    height: auto;
    max-height: 100%;
    max-width: 100%;
  }
</style>
