'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';

const LINKS: [string, string][] = [
  ['/', 'Gauge'],
  ['/incidents', 'Incidents'],
  ['/services', 'Services'],
  ['/asns', 'ASNs'],
  ['/routes', 'Routes'],
  ['/bgp', 'BGP'],
  ['/probes', 'Probes'],
  ['/history', 'History'],
  ['/methodology', 'Methodology'],
  ['/api', 'API'],
];

export function NavLinks({ className = '', compact = false }: { className?: string; compact?: boolean }) {
  const path = usePathname();
  return (
    <nav aria-label="Primary" className={`items-center gap-1 ${className}`}>
      {LINKS.map(([href, label]) => {
        const active = href === '/' ? path === '/' : path.startsWith(href);
        return (
          <Link
            key={href}
            href={href}
            aria-current={active ? 'page' : undefined}
            className={`whitespace-nowrap rounded-[3px] px-2 text-[11.5px] tracking-[0.04em] transition-colors ${compact ? 'py-2' : 'py-1'} ${active ? 'text-ink' : 'text-ink-2 hover:text-ink'}`}
            style={active ? { boxShadow: 'inset 0 -1px 0 var(--accent)' } : undefined}
          >
            {label}
          </Link>
        );
      })}
    </nav>
  );
}