---
// import { getLanguageFromURL, KNOWN_LANGUAGE_CODES } from '../../languages';
import * as CONFIG from '../../config';
// import AstroLogo from './AstroLogo.astro';
// import LanguageSelect from './LanguageSelect';
import Search from './Search';
import CommandLineIcon from '@heroicons/react/20/solid/CommandLineIcon';
import MobileNav from '../../docs/MobileNav';
import { SIDEBAR } from '../../config';

type Props = {
  currentPage?: string;
};

const { currentPage } = Astro.props as Props;
// const lang = getLanguageFromURL(currentPage);
const langCode = 'en'; // getLanguageFromURL(currentPage);
const sidebar = SIDEBAR[langCode];

const { BASE_URL } = import.meta.env;
const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL;
---

<nav
  class="flex justify-between py-2 px-4 items-center h-14 max-h-14 bg-lineHighlight text-foreground"
  title="Top Navigation"
>
  <div class="flex overflow-visible items-center grow" style="overflow:visible">
    <div class="flex items-center text-2xl space-x-2">
      <h1 class="font-bold flex space-x-2 items-baseline text-xl">
        <span class="block rotate-90 text-blue-500">꩜</span>
        <div class="flex space-x-2 items-baseline">
          <span class="">strudel</span>
          <span class="text-sm font-medium">DOCS</span>
        </div>
      </h1>
    </div>
  </div>
  {/* KNOWN_LANGUAGE_CODES.length > 1 && <LanguageSelect lang={lang} client:idle /> */}
  <div class="search-item h-10">
    <Search client:idle />
  </div>
  <a href={`${baseNoTrailing}/`} class="hidden md:flex cursor-pointer items-center space-x-1"
    ><CommandLineIcon className="w-5 h-5" /><span>go to REPL</span>
  </a>
  <div class="md:hidden">
    <MobileNav sidebar={sidebar} client:idle />
  </div>
</nav>

<style>
  /** Style Algolia */
  :root {
    --docsearch-primary-color: var(--lineHighlight);
    --docsearch-logo-color: var(--foreground);
  }

  .search-item {
    display: none;
    position: relative;
    z-index: 10;
    flex-grow: 1;
    padding-right: 0.7rem;
    display: flex;
    max-width: 200px;
  }

  @media (min-width: 50em) {
    .search-item {
      max-width: 400px;
    }
  }
</style>

<style is:global>
  .search-item > * {
    flex-grow: 1;
  }
</style>