import Link from 'next/link'
import siteConfig from '@/lib/site-config'
import { NavLink } from './NavLink'
import { MobileMenuToggle } from './MobileMenuToggle'

export function Nav() {
  const navLinks = siteConfig.headerNavLinks ?? []

  return (
    <header className="bg-paper border-hair sticky top-0 z-50 border-b">
      <div className="max-w-shell mx-auto grid h-[72px] grid-cols-[auto_1fr_auto] items-center gap-4 px-5 md:gap-8 md:px-10">
        <Link href="/" className="text-ink flex items-center gap-3.5">
          <span className="text-ink inline-flex items-baseline font-mono text-[20px] leading-none font-medium tracking-[-0.01em]">
            <span className="text-ink-4 font-normal" aria-hidden="true">[</span>
            arter.dev
            <span className="text-ink-4 font-normal" aria-hidden="true">]</span>
          </span>
          <span className="text-ink-3 hidden font-mono text-[10.5px] tracking-wider uppercase md:inline">
            A Log of Tech &amp; Cars
          </span>
        </Link>

        <ul className="m-0 hidden list-none justify-center gap-0.5 p-0 md:flex">
          {navLinks.map((link) => (
            <li key={link.href}>
              <NavLink
                href={link.href}
                activeClassName="text-ink pl-[22px]"
                inactiveClassName="text-ink-3 hover:text-ink"
                showArrow
                className="tracking-mono relative block px-4 py-2.5 font-mono text-xs uppercase transition-colors"
              >
                {link.text}
              </NavLink>
            </li>
          ))}
        </ul>

        <div className="flex min-w-[44px] items-center justify-end">
          <MobileMenuToggle />
        </div>
      </div>

      <ul
        id="mobile-menu"
        className="mobile-menu border-hair m-0 hidden list-none flex-col border-t p-0 md:hidden"
        aria-hidden="true"
      >
        {navLinks.map((link) => (
          <li key={link.href}>
            <NavLink
              href={link.href}
              activeClassName="text-ink"
              inactiveClassName="text-ink-2 hover:text-ink"
              className="tracking-mono block border-b border-white/5 px-5 py-3.5 font-mono text-[13px] uppercase"
            >
              {link.text}
            </NavLink>
          </li>
        ))}
      </ul>
    </header>
  )
}