'use client';

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

export type PortalTab = { href: string; label: string; badge?: number };

/** Horizontal, scrollable tab bar for the lawyer and firm dashboards */
export function PortalNav({ tabs }: { tabs: PortalTab[] }) {
  const path = usePathname();
  // The most specific matching tab wins (/portal/firm/team beats /portal/firm)
  const active = tabs.filter((t) => path === t.href || (t.href !== '/portal' && path.startsWith(`${t.href}/`))).sort((a, b) => b.href.length - a.href.length)[0]?.href ?? (path === '/portal' ? '/portal' : null);
  return (
    <nav aria-label="Dashboard" className="-mb-px flex gap-1 overflow-x-auto">
      {tabs.map((t) => {
        const on = t.href === active;
        return (
          <Link
            key={t.href}
            href={t.href}
            aria-current={on ? 'page' : undefined}
            className={`inline-flex shrink-0 items-center gap-1.5 border-b-2 px-3 py-2.5 text-sm font-medium transition-colors ${on ? 'border-ledger text-ledger' : 'border-transparent text-ink-2 hover:border-rule-strong hover:text-ink'}`}
          >
            {t.label}
            {!!t.badge && <span className="num rounded-full bg-brass-soft px-1.5 text-[11px] font-bold leading-5 text-brass">{t.badge > 99 ? '99+' : t.badge}</span>}
          </Link>
        );
      })}
    </nav>
  );
}