---
import { ArrowUpRight } from 'lucide-react';
import Discord from '@/assets/logos/discord.svg?react';
import GitHub from '@/assets/logos/github.svg?react';
import LogoMonoVersion from '@/assets/logos/videojs-mono.svg?react';
import { DISCORD_INVITE_URL, GITHUB_REPO_URL, MUX_URL } from '@/consts';
import GetStartedLink from './NavBar/GetStartedLink';
import { ThemeToggle } from './ThemeToggle';

type NavLink = {
  href: string;
  label: string;
  external?: boolean;
};
const navLinks: NavLink[] = [
  { href: '/blog', label: 'Blog' },
  { href: '/privacy', label: 'Privacy' },
  { href: 'https://legacy.videojs.org', label: 'V8', external: true },
];

type Props = {
  class?: string;
};
const { class: className } = Astro.props;
---

<footer
  class:list={[
    "@container mt-30 grid gap-3 pb-11 @4xl:mt-32 @4xl:pt-0",
    className,
  ]}
>
  <div
    class="mb-2 items-start justify-between gap-3 border-faded-black px-5 pt-5 sm:mb-0 @4xl:flex-row @4xl:items-start @4xl:border-t @4xl:px-10 dark:border-warm-gray"
  >
    <nav
      class="flex flex-col gap-0 text-faded-black @4xl:-ml-5 @4xl:flex-row dark:text-manila-light"
    >
      <div
        class="flex flex-wrap justify-between gap-2 border-t border-b border-faded-black pt-3 pb-3 @4xl:justify-center @4xl:border-0 @4xl:pt-0 @4xl:pb-0 dark:border-manila-light"
      >
        <GetStartedLink
          client:idle
          className="flex items-center rounded-xs px-2 py-2 font-display font-bold uppercase @4xl:px-5 intent:bg-manila-dark dark:intent:bg-warm-gray"
        >
          Docs
        </GetStartedLink>
        {
          navLinks.map((link) => (
            <a
              href={link.href}
              class="flex items-center gap-1.5 rounded-xs px-2 py-2 font-display font-bold uppercase @4xl:px-5 intent:bg-manila-dark dark:intent:bg-warm-gray"
            >
              {link.label}{" "}
              {link.external ? (
                <ArrowUpRight size="1em" aria-hidden="true" />
              ) : null}
            </a>
          ))
        }
      </div>
      <div
        class="flex flex-1 justify-start gap-4 pt-5 pb-8 @4xl:justify-center @4xl:gap-0 @4xl:py-0 @4xl:pb-0"
      >
        <a
          href={DISCORD_INVITE_URL}
          class="flex items-center rounded-xs px-2 py-2 font-display font-bold uppercase @4xl:px-5 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="flex items-center rounded-xs px-2 py-2 font-display font-bold uppercase @4xl:px-5 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 class="ml-auto">
          <ThemeToggle client:idle />
        </div>
      </div>
    </nav>

    <p
      class="mt-10 text-left font-sans text-p2 text-faded-black dark:text-manila-light"
    >
      Video.js is a free and open source HTML5 <a
        href="/"
        class="underline intent:decoration-gold">video player.</a
      >
      <br class="@5xl:hidden" />Video hosting and streaming <a
        href={MUX_URL}
        class="underline intent:decoration-gold"
        >sponsored by Mux.
      </a>
      <br />
      The term VIDEO.JS is a registered trademark of Brightcove Inc. <br
        class="@5xl:hidden"
      />&copy; 2010&ndash;{new Date().getFullYear()} Video.js contributors
    </p>
  </div>
</footer>