'use client'

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

/**
 * Eine Reiterleiste.
 *
 * Sie hebt hervor, wo man gerade ist. Vorher taten das weder die Reiter der
 * Fallakte noch die der Verwaltung - fünf gleich aussehende Links, und man
 * musste an der Seite selbst ablesen, welcher davon offen war.
 *
 * Der Vergleich läuft über den Pfad, nicht über die vollständige Adresse:
 * Suchparameter gehören zur Ansicht, nicht zum Reiter.
 */
export function Tabs({ tabs }: { tabs: { href: string; label: string }[] }) {
  const pfad = usePathname()

  return (
    <nav className="mt-8 flex flex-wrap gap-2 border-b border-line pb-3">
      {tabs.map((reiter) => {
        // Der längste passende Eintrag gewinnt, damit „/admin" nicht jeden
        // Unterbereich für sich beansprucht.
        const passt = pfad === reiter.href || pfad.startsWith(reiter.href + '/')
        const laenger = tabs.some(
          (anderer) =>
            anderer.href.length > reiter.href.length &&
            (pfad === anderer.href || pfad.startsWith(anderer.href + '/')),
        )
        const aktiv = passt && !laenger

        return (
          <Link
            key={reiter.href}
            href={reiter.href}
            aria-current={aktiv ? 'page' : undefined}
            className="btn btn-sm"
          >
            {reiter.label}
            <Pending />
          </Link>
        )
      })}
    </nav>
  )
}