---
/**
 * The cross-site header.
 *
 * The four sites are four separate origins, so the nav is absolute URLs rather
 * than routes. `current` gets aria-current and loses its link, which is both an
 * accessibility affordance and the only visual state the nav has.
 */
import { NAV_ORDER, SITES, type SiteKey } from '../config.js';

interface Props {
	current: SiteKey;
}

const { current } = Astro.props;
---

<header class="site-header canvas">
	<div class="site-header__inner">
		<a class="wordmark" href={SITES.home.url} rel="home">eratic</a>

		<nav aria-label="Sections">
			<ul>
				{
					NAV_ORDER.map((key) => (
						<li>
							{key === current ? (
								<span aria-current="page">{SITES[key].label}</span>
							) : (
								<a href={SITES[key].url}>{SITES[key].label}</a>
							)}
						</li>
					))
				}
			</ul>
		</nav>
	</div>
</header>

<style>
	.site-header {
		padding-block: var(--space-m);
	}

	.site-header__inner {
		grid-column: wide;
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--space-s) var(--space-m);
	}

	.wordmark {
		font-family: var(--font-prose);
		font-size: var(--step-1);
		font-weight: 600;
		letter-spacing: -0.02em;
		color: var(--ink);
		text-decoration: none;
	}

	.wordmark:hover {
		color: var(--accent);
	}

	nav ul {
		display: flex;
		gap: var(--space-m);
		list-style: none;
		padding: 0;
		margin: 0;
	}

	nav :is(a, span) {
		font-family: var(--font-ui);
		font-size: var(--step--1);
		letter-spacing: 0.02em;
		text-decoration: none;
		color: var(--ink-muted);
	}

	nav a:hover {
		color: var(--ink);
	}

	nav [aria-current='page'] {
		color: var(--ink);
		/* The current section is marked with a rule rather than a colour, so it
		   still reads when the accent is overridden by an article theme. */
		box-shadow: 0 1px 0 0 var(--ink);
	}
</style>