---
import HeaderLink from "./HeaderLink.astro";
import HeaderLogo from "../assets/HeaderLogo.png";
---

<header>
  <nav>
    <div>
      <a href="/">
        <img
          src={HeaderLogo.src}
          alt="Terakoda"
          height={HeaderLogo.height / 4}
          width={HeaderLogo.width / 4}
        />
      </a>
    </div>
    <div class="internal-links">
      <HeaderLink href="/">Home</HeaderLink>
      <HeaderLink href="/blog">Blog</HeaderLink>
      <HeaderLink href="/about">About</HeaderLink>
    </div>
  </nav>
</header>
<style>
  header {
    margin: 0;
    padding: 0 1em;
    box-shadow: 0 2px 8px rgba(var(--black), 5%);
    background-color: #1f2932; /* Dark Background */
    color: #fdfafc; /* Light Text */
  }

  nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  nav a {
    padding: 1em 0.5em;
    color: var(--black);
    border-bottom: 4px solid transparent;
    text-decoration: none;
  }
  nav a.active {
    text-decoration: none;
    border-bottom-color: var(--color-primary);
  }
</style>