'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { Pending } from '@/components/Pending'

/**
 * Die Bereiche der Anwendung in der Kopfzeile.
 *
 * Sie waren blosse Textlinks — von einem Fliesstextlink nicht zu unterscheiden
 * und ohne Hinweis darauf, wo man gerade ist. Jetzt tragen sie dieselbe
 * Knopfform wie alles Bedienbare, und der Bereich, in dem man steht, ist
 * gefüllt.
 *
 * Der Vergleich läuft über den Pfad, nicht über die vollständige Adresse: die
 * Suche bleibt hervorgehoben, während man ihre Filter wechselt.
 */
export function NavLinks({ links }: { links: { href: string; label: string }[] }) {
  const pfad = usePathname()

  return (
    <nav className="flex flex-wrap gap-1.5">
      {links.map((eintrag) => {
        const aktiv = pfad === eintrag.href || pfad.startsWith(eintrag.href + '/')
        return (
          <Link
            key={eintrag.href}
            href={eintrag.href}
            aria-current={aktiv ? 'page' : undefined}
            className="btn btn-sm"
          >
            {eintrag.label}
            <Pending />
          </Link>
        )
      })}
    </nav>
  )
}