'use client';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { t } from '@/i18n';
import { cn } from '@/lib/cn';
import { routes } from '@/lib/site';

const ITEMS = [
  { href: routes.admin(), key: 'admin.nav.overview' },
  { href: routes.admin('coverage'), key: 'admin.nav.coverage' },
  { href: routes.admin('runs'), key: 'admin.nav.runs' },
  { href: routes.admin('issues'), key: 'admin.nav.issues' },
  { href: routes.admin('raw'), key: 'admin.nav.raw' },
] as const;

export function AdminNav() {
  const pathname = usePathname();
  return (
    <nav aria-label={t('admin.title')} className="scrollbar-none -mx-1 min-w-0 overflow-x-auto">
      <ul className="flex items-center gap-0.5">
        {ITEMS.map((it) => {
          const active = pathname === it.href;
          return (
            <li key={it.href} className="shrink-0">
              <Link href={it.href} aria-current={active ? 'page' : undefined} className={cn('inline-flex h-10 items-center rounded-sm px-2.5 text-sm md:h-8', active ? 'bg-ink text-paper' : 'text-ink-2 hover:bg-surface-2 hover:text-ink')}>
                {t(it.key)}
              </Link>
            </li>
          );
        })}
      </ul>
    </nav>
  );
}