'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { cn } from '@/lib/utils'

type NavItem = { href: string; label: string }

const mainNav: NavItem[] = [
  { href: '/', label: 'Home' },
  { href: '/blog', label: 'Blog' },
  { href: '/#about', label: 'About' },
  { href: '/#contact', label: 'Contact' },
]

function NavLink({ href, label }: NavItem) {
  const pathname = usePathname()
  const isActive =
    href === '/'
      ? pathname === '/'
      : pathname.startsWith(href.replace('/#', '/'))

  return (
    <Link
      href={href}
      className={cn(
        'px-2 py-1 text-sm rounded-md transition-colors text-neutral-800 dark:text-neutral-200',
        'hover:bg-black/[0.04] dark:hover:bg-white/5',
        isActive && 'text-foreground underline underline-offset-4'
      )}
      aria-current={isActive ? 'page' : undefined}
    >
      {label}
    </Link>
  )
}

export function Navbar() {
  return (
    <header className="sticky top-0 z-40 w-full border-b border-black/5 dark:border-white/10 bg-background/70 backdrop-blur">
      <div className="mx-auto max-w-5xl px-4 md:px-6 h-14 flex items-center justify-between">
        <div className="font-semibold tracking-tight">
          <Link
            href="/"
            className="px-2 py-1 rounded-md text-neutral-800 dark:text-neutral-200 hover:bg-black/[0.04] dark:hover:bg-white/5"
            aria-label="Home"
          >
            N
          </Link>
        </div>

        <nav className="flex items-center gap-1" aria-label="Primary">
          {mainNav.map((item) => (
            <NavLink key={item.href} {...item} />
          ))}
        </nav>

        <div className="flex items-center gap-2" aria-label="Utilities">
          <Link
            href="/rss"
            className="px-2 py-1 text-sm rounded-md text-neutral-800 dark:text-neutral-200 hover:bg-black/[0.04] dark:hover:bg-white/5"
          >
            RSS
          </Link>
          <a
            href="https://github.com/vercel/next.js"
            target="_blank"
            rel="noreferrer"
            className="px-2 py-1 text-sm rounded-md text-neutral-800 dark:text-neutral-200 hover:bg-black/[0.04] dark:hover:bg-white/5"
          >
            GitHub
          </a>
        </div>
      </div>
    </header>
  )
}