---
import clsx from 'clsx';
import { ArrowUpRight } from 'lucide-react';
import Discord from '@/assets/logos/discord.svg?react';
import GitHub from '@/assets/logos/github.svg?react';
import Logo from '@/assets/logos/videojs.svg?react';
import BetaPill from '@/components/BetaPill';
import { DISCORD_INVITE_URL, GITHUB_REPO_URL } from '@/consts';
import Search from '../Search';
import GetStartedLink from './GetStartedLink';
import MobileNav from './MobileNav';

export interface Props {
  class?: string;
}

type NavLink = {
  href: string;
  label: string;
  matchPath: string | null;
  external?: boolean;
};
const navLinks: NavLink[] = [
  { href: '/docs', label: 'Docs', matchPath: '/docs' },
  { href: '/blog', label: 'Blog', matchPath: '/blog' },
];

const currentPath = Astro.url.pathname;
const isDocsActive = currentPath.startsWith('/docs');
const otherNavLinks = navLinks.filter((link) => link.href !== '/docs');
const { class: className } = Astro.props;
---

<nav
  aria-label="Video.js"
  class:list={[
    "flex justify-between",
    "mx-auto w-full max-w-305 items-center px-5 py-7 md:py-10",
    className,
  ]}
>
  <a href="/" class="flex h-7 items-center gap-3 lg:h-10 lg:gap-4">
    <Logo height="100%" />
    <span class="sr-only">Video.js video player</span>
    <BetaPill className="hidden sm:inline-flex" />
  </a>
  <Search client:load className="mr-4 ml-auto sm:self-center" />
  {/* Desktop nav links */}
  <div class="hidden md:flex">
    <GetStartedLink
      client:idle
      className={clsx(
        "flex items-center rounded-xs px-5 py-2 font-display font-bold uppercase intent:bg-manila-dark dark:intent:bg-warm-gray",
      )}
      aria-current={isDocsActive ? "page" : undefined}
    >
      Docs
    </GetStartedLink>
    {
      otherNavLinks.map((link) => (
        <a
          href={link.href}
          class:list={[
            "flex items-center rounded-xs px-5 py-2 font-display font-bold uppercase intent:bg-manila-dark dark:intent:bg-warm-gray",
          ]}
        >
          {link.label}{" "}
          {link.external ? (
            <ArrowUpRight size="1em" aria-hidden="true" />
          ) : null}
        </a>
      ))
    }
    <a
      href={DISCORD_INVITE_URL}
      class={clsx(
        "flex items-center rounded-xs px-3 py-2 font-display font-bold uppercase intent:bg-manila-dark dark:intent:bg-warm-gray",
      )}
      aria-label="Discord"
      target="_blank"
      rel="noopener noreferrer"
    >
      <Discord width="1.5em" height="1.5em" />
    </a>
    <a
      href={GITHUB_REPO_URL}
      class={clsx(
        "flex items-center rounded-xs px-3 py-2 font-display font-bold uppercase intent:bg-manila-dark dark:intent:bg-warm-gray",
      )}
      aria-label="GitHub"
      target="_blank"
      rel="noopener noreferrer"
    >
      <GitHub width="1.5em" height="1.5em" />
    </a>
  </div>

  <MobileNav client:idle navLinks={navLinks} currentPath={currentPath}>
    <slot name="mobile-nav" />
  </MobileNav>
</nav>
