---
import Wordmark from "~/components/atoms/Wordmark.astro";
import { home, blog, art, code } from "~/lib/urls";

type CurrentSection = "home" | "blog" | "art" | "code";

interface Props {
  current?: CurrentSection;
  showCoord?: boolean;
}

const { current = "home", showCoord = false } = Astro.props;

const items: { id: CurrentSection; label: string; href: string }[] = [
  { id: "home", label: "Index", href: home("/") },
  { id: "blog", label: "Blog", href: blog("/") },
  { id: "code", label: "Code", href: code("/") },
  { id: "art", label: "Art", href: art("/") },
];
---

<header class="topbar">
  <Wordmark />
  {
    showCoord ? (
      <span class="coord">33.7969° S · Sydney</span>
    ) : (
      <nav class="topnav">
        {items.map((item) => (
          <a href={item.href} class={current === item.id ? "current" : undefined}>
            {item.label}
          </a>
        ))}
      </nav>
    )
  }
</header>