---
interface Props {
  siteName: string;
  logoUrl?: string;
  hideModeToggle: boolean;
  navLinks: { label: string; href: string }[];
}
const { siteName, logoUrl, hideModeToggle, navLinks } = Astro.props;
---
<div class="editorial-shell">
  <header class="editorial-shell__header">
    <div class="editorial-shell__masthead">
      <a class="editorial-shell__title" href="/">
        {logoUrl ? (
          <img src={logoUrl} alt={siteName} class="editorial-shell__logo" height="32" />
        ) : (
          siteName
        )}
      </a>
    </div>
    <hr class="editorial-shell__rule" />
    <nav class="editorial-shell__nav" aria-label="Main">
      <form class="editorial-shell__search" action="/search" method="get" role="search">
        <label class="visually-hidden" for="editorial-header-search-q">Search</label>
        <input
          id="editorial-header-search-q"
          class="editorial-shell__search-input"
          type="search"
          name="q"
          autocomplete="off"
          placeholder="Search…"
        />
        <button type="submit" class="editorial-shell__search-submit">Search</button>
      </form>
      {navLinks.map((l) => <a href={l.href}>{l.label}</a>)}
      {!hideModeToggle ? (
        <button type="button" class="editorial-shell__theme-toggle" id="theme-toggle" aria-label="Toggle light/dark theme">
          Theme
        </button>
      ) : null}
    </nav>
  </header>
  <slot />
  <footer class="editorial-shell__footer">{siteName} — a content distribution built on the platform</footer>
</div>
<style>
  .editorial-shell {
    color: var(--mod-color-fg);
    font-family: 'Schibsted Grotesk', ui-sans-serif, sans-serif;
  }

  .editorial-shell__header {
    max-width: 52rem;
    margin-inline: clamp(1rem, 3vw, 2rem);
    padding-block: 2rem 1.5rem;
  }

  .editorial-shell__masthead {
    padding-block-end: 1rem;
  }

  .editorial-shell__title {
    display: inline-block;
    font-family: 'Fraunces', serif;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 500;
    line-height: 1.15;
    color: var(--mod-color-fg);
    text-decoration: none;
  }

  .editorial-shell__title:hover {
    color: var(--mod-color-accent);
    text-decoration: none;
  }

  .editorial-shell__logo {
    display: block;
    height: 2rem;
    width: auto;
  }

  .editorial-shell__rule {
    border: 0;
    border-top: 1px solid var(--mod-color-border-strong);
    margin: 0 0 1rem;
  }

  .editorial-shell__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    font-size: var(--mod-font-size-sm);
  }

  .editorial-shell__nav a {
    color: var(--mod-color-fg-muted);
    text-decoration: none;
  }

  .editorial-shell__nav a:hover {
    color: var(--mod-color-fg);
  }

  .editorial-shell__search {
    display: flex;
    align-items: stretch;
    flex: 1 1 12rem;
    min-width: 0;
    max-width: 18rem;
    gap: 0.25rem;
  }

  .editorial-shell__search-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--mod-color-border);
    border-radius: 2px;
    background: var(--mod-color-bg);
    color: var(--mod-color-fg);
    font: inherit;
    font-size: var(--mod-font-size-sm);
  }

  .editorial-shell__search-submit {
    flex: 0 0 auto;
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--mod-color-border);
    border-radius: 2px;
    background: var(--mod-color-surface);
    color: var(--mod-color-fg);
    font: inherit;
    font-size: var(--mod-font-size-sm);
    cursor: pointer;
  }

  .editorial-shell__theme-toggle {
    border: 1px solid var(--mod-color-border);
    background: var(--mod-color-surface);
    color: var(--mod-color-fg);
    border-radius: 2px;
    padding: 0.35rem 0.75rem;
    font: inherit;
    font-size: var(--mod-font-size-sm);
    cursor: pointer;
  }

  .editorial-shell__theme-toggle:hover {
    border-color: var(--mod-color-accent);
  }

  .editorial-shell__footer {
    max-width: 52rem;
    margin-inline: clamp(1rem, 3vw, 2rem);
    padding-block: 2rem 3rem;
    border-top: 1px solid var(--mod-color-border);
    color: var(--mod-color-fg-subtle);
    font-size: var(--mod-font-size-sm);
  }
</style>