---
import { Icon } from 'astro-icon';
import Logo from '~/components/Logo.astro';
import ToggleTheme from '~/components/common/ToggleTheme.astro';
import ToggleMenu from '~/components/common/ToggleMenu.astro';

import { getHomePermalink, getAsset } from '~/utils/permalinks';

interface Link {
  text?: string;
  href?: string;
  ariaLabel?: string;
  icon?: string;
}

interface ActionLink extends Link {
  type?: string;
}

interface MenuLink extends Link {
  links?: Array<Link>;
}

export interface Props {
  links?: Array<MenuLink>;
  actions?: Array<ActionLink>;
  isSticky?: boolean;
  showToggleTheme?: boolean;
  showRssFeed?: boolean;
  position?: string;
}

const {
  links = [],
  actions = [],
  isSticky = false,
  showToggleTheme = false,
  showRssFeed = false,
  position = 'center',
} = Astro.props;
---

<header
  class:list={[
    { sticky: isSticky, relative: !isSticky },
    'top-0 z-40 flex-none mx-auto w-full transition-all ease-in duration-100',
  ]}
  id="header"
>
  <div class="py-3 px-3 md:py-3.5 md:px-4 mx-auto w-full md:flex md:justify-between max-w-screen-xl">
    <div class:list={[{"mr-auto": position === "right"}, "flex justify-between"]}>
      <a class="flex items-center" href={getHomePermalink()}>
        <Logo />
      </a>
      <div class="flex items-center md:hidden">
        <ToggleTheme />
        <ToggleMenu />
      </div>
    </div>
    <nav
      class="items-center w-full md:w-auto hidden md:flex dark:text-slate-200 h-[calc(100vh-72px)] md:h-auto overflow-y-auto md:overflow-visible md:mx-5"
      aria-label="Main navigation"
    >
      <ul class="flex flex-col pt-8 md:pt-0 md:flex-row md:self-center w-full md:w-auto text-xl md:text-base">
        {
          links.map(({ text, href, links }) => (
            <li class={links?.length ? 'dropdown' : ''}>
              {links?.length ? (
                <>
                  <button class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out">
                    {text} <Icon name="tabler:chevron-down" class="w-3.5 h-3.5 ml-0.5 hidden md:inline" />
                  </button>
                  <ul class="dropdown-menu md:backdrop-blur-md dark:md:bg-dark rounded md:absolute pl-4 md:pl-0 md:hidden font-medium md:bg-white/90 md:min-w-[200px] drop-shadow-xl">
                    {links.map(({ text: text2, href: href2 }) => (
                      <li>
                        <a
                          class="first:rounded-t last:rounded-b md:hover:bg-gray-200 dark:hover:bg-gray-700 py-2 px-5 block whitespace-no-wrap"
                          href={href2}
                        >
                          {text2}
                        </a>
                      </li>
                    ))}
                  </ul>
                </>
              ) : (
                <a
                  class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
                  href={href}
                >
                  {text}
                </a>
              )}
            </li>
          ))
        }
      </ul>
    </nav>
    <div class:list={[{ 'ml-auto': position === 'left' }, 'md:self-center flex items-center md:mb-0']}>
      <div class="hidden items-center md:flex">
        {showToggleTheme && <ToggleTheme iconClass="w-5 h-5" />}

        {
          showRssFeed && (
            <a
              class="text-muted dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
              aria-label="RSS Feed"
              href={getAsset('/rss.xml')}
            >
              <Icon name="tabler:rss" class="w-5 h-5" />
            </a>
          )
        }
        {
          actions?.length ? (
            <span class="ml-4">
              {actions.map(({ text, href, type }) => (
                <a
                  class:list={[
                    'btn ml-2 py-2.5 px-5.5 md:px-6 font-semibold shadow-none text-sm',
                    { 'btn-ghost': type === 'ghost', 'btn-primary': type === 'primary' },
                  ]}
                  href={href}
                >
                  <Fragment set:html={text} />
                </a>
              ))}
            </span>
          ) : (
            ''
          )
        }
      </div>
    </div>
  </div>
</header>