<script lang="ts">
  import { Navbar, NavLi, NavBrand, NavHamburger, NavUl, DarkMode, Dropdown, DropdownItem } from 'flowbite-svelte';
  import DynamicCodeBlockStyle from './DynamicCodeBlockStyle.svelte';
  import { Bluesky, DotsHorizontalOutline, GithubSolid, XSolid } from 'runes-webkit';
  import { page } from '$app/state';

  const githubUrl = `https://github.com/shinokada/${__NAME__}`;
  const twitterUrl = 'https://twitter.com/shinokada';
  const blueskyUrl = 'https://bsky.app/profile/codewithshin.com';

  let activeUrl = $derived(page.url.pathname);

  let activeClass = 'p-2 text-base hover:text-gray-600';
  let nonActiveClass = 'p-2 text-base hover:text-gray-600';
</script>

<Navbar breakpoint="xl" fluid class="fixed top-0 left-0 z-50 border-b border-gray-100 bg-white py-4  sm:px-12 dark:border-gray-700 dark:bg-gray-900" navContainerClass="xl:justify-between">
  <NavBrand href="/">
    <span class="self-center text-2xl font-semibold whitespace-nowrap xl:text-3xl dark:text-white">Svelte Rune Highlight</span>
  </NavBrand>
  <div class="flex justify-end xl:order-2">
    <NavHamburger class="order-3" />
    <DynamicCodeBlockStyle class="hidden xl:block" />
    <DotsHorizontalOutline class="mt-2 mr-4 ml-6 dark:text-white" size="lg" />
    <Dropdown simple class="p-1">
      {#if blueskyUrl}
        <DropdownItem href={blueskyUrl} target="_blank" class="m-0 p-0.5">
          <Bluesky size="30" />
        </DropdownItem>
      {/if}
      {#if twitterUrl}
        <DropdownItem href={twitterUrl} target="_blank" class="m-0 p-2"><XSolid /></DropdownItem>
      {/if}
      {#if githubUrl}
        <DropdownItem href={githubUrl} target="_blank" class="m-0 p-2">
          <GithubSolid />
        </DropdownItem>
      {/if}
    </Dropdown>
    <DarkMode class="m-0 p-2" />
  </div>
  <NavUl breakpoint="xl" {activeUrl} class="order-2 xl:order-1" classes={{ active: activeClass, nonActive: nonActiveClass, ul: 'p-0' }}>
    <NavLi href="/">Home</NavLi>
    <NavLi href="/highlight">Highlight</NavLi>
    <NavLi href="/auto">Auto</NavLi>
    <NavLi href="/svelte">Svelte</NavLi>
    <NavLi href="/line-numbers">Line Numbers</NavLi>
    <NavLi href="/highlight-compo">HighlightCompo</NavLi>
    <NavLi href="/theme-selector">Theme Selector</NavLi>
    <NavLi href="/styling">Styling</NavLi>
    <NavLi href="/wrappers">Wrappers</NavLi>
  </NavUl>
</Navbar>
