---
import { DISCORD_INVITE_URL, GITHUB_REPO_URL } from '@/consts';
import { ArrowUpRight } from 'lucide-react';
import GitHub from './icons/GitHub';
import Discord from './icons/Discord';

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

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

<footer class:list={['border-t border-light-40 py-6 px-3 grid gap-3', className]}>
  <nav class="flex flex-col sm:flex-row">
    <div class="flex justify-center sm:justify-start">
      {
        navLinks.map((link) => (
          <a href={link.href} class="intent:underline px-3 py-2 inline-flex gap-1 items-center">
            {link.label} {link.external ? <ArrowUpRight size="1em" /> : null}
          </a>
        ))
      }
    </div>
    <div class="flex justify-center sm:justify-start">
      <a
        href={GITHUB_REPO_URL}
        class="group px-3 py-2 inline-flex items-center"
        aria-label="GitHub"
        target="_blank"
        rel="noopener noreferrer"
      >
        <GitHub size="1em" className="text-dark-80 intent:text-dark-100" />
      </a>
      <a
        href={DISCORD_INVITE_URL}
        class="group px-3 py-2 inline-flex items-center"
        aria-label="Discord"
        target="_blank"
        rel="noopener noreferrer"
      >
        <Discord size="1em" className="text-dark-80 intent:text-dark-100" />
      </a>
    </div>
  </nav>

  <p class="text-sm text-center sm:text-left text-dark-40 px-3">
    © 2010&ndash;{new Date().getFullYear()}, Video.js contributors
    <br />
    Video.js is a free and open source HTML5 video player framework
    <br />
    Sponsored by <a
      href="https://www.mux.com?utm_source=videojs&utm_campaign=vjs10"
      class="underline intent:decoration-wavy"
    >
      Mux
    </a>
  </p>
</footer>