---
import { facebook, getSettings, invariant, twitter } from "@matthiesenxyz/astro-ghostcms/api";
const settings = await getSettings();
invariant(settings, 'Settings not found');
import Container from "./container.astro";
import { Astronav, MenuItems, MenuIcon } from "astro-navbar";

---

<Container>
  <header class="flex flex-col lg:flex-row justify-between items-center my-5">
    <Astronav>
      <div class="flex w-full lg:w-auto items-center justify-between">
        <a href="/" class="text-lg">
          {settings.icon && <img src={settings.icon} width="64" class="flex-1 inline">}
          <span class="font-bold flex-2 text-ctp-blue">{settings.title}</span>
        </a>
        <div class="block lg:hidden">
          <MenuIcon class="w-4 h-4 text-ctp-pink" />
        </div>
      </div>
      <MenuItems class="hidden w-full lg:w-auto mt-2 lg:flex lg:mt-0">
        <ul class="flex flex-col lg:flex-row lg:gap-3">
          { settings.navigation.map(({ label, url }) => (
            <li>
              <a href={url}
                class="flex lg:px-3 py-2 items-center text-ctp-teal hover:text-ctp-green">
                <span> {label}</span>
              </a>
            </li>
          )) }
        </ul>
        <div class="lg:hidden flex items-center mt-3 gap-4">
        { settings.facebook && (
          <a
            class=""
            href={facebook(settings.facebook)}
            title="Facebook"
            target="_blank"
            rel="noopener"
          > <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="text-ctp-blue bi bi-facebook" viewBox="0 0 16 16"> <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951"/> </svg>
          </a>
        )}
        {settings.twitter && (
          <a
            class="gh-social-twitter"
            href={twitter(settings.twitter)}
            title="Twitter"
            target="_blank"
            rel="noopener"
          ><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="text-ctp-subtext1 bi bi-twitter-x" viewBox="0 0 16 16"> <path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z"/> </svg>
          </a>
        )}
        </div>
      </MenuItems>
    </Astronav>
    <div>
      <div class="hidden lg:flex items-center gap-4">
        { settings.facebook && (
          <a
            class=""
            href={facebook(settings.facebook)}
            title="Facebook"
            target="_blank"
            rel="noopener"
          ><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="text-ctp-blue bi bi-facebook" viewBox="0 0 16 16"> <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951"/> </svg>
          </a>
        )}
        {settings.twitter && (
          <a
            class="gh-social-twitter"
            href={twitter(settings.twitter)}
            title="Twitter"
            target="_blank"
            rel="noopener"
          ><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="text-ctp-subtext1 bi bi-twitter-x" viewBox="0 0 16 16"> <path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z"/> </svg>
          </a>
        )}
      </div>
    </div>
  </header>
</Container>