EpicNext-Cms/src/components/admin/admin-section-tabs.tsx

"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { cn } from "@/lib/utils";

export interface AdminTab {
	href: string;
	label: string;
	/** Extra prefixes that count as active for this tab (detail routes). */
	match?: string[];
}

function matchLength(pathname: string, prefix: string): number {
	if (pathname === prefix) return prefix.length + 1; // prefer exact
	if (pathname.startsWith(`${prefix}/`)) return prefix.length;
	return -1;
}

export function AdminSectionTabs({ tabs }: { tabs: AdminTab[] }) {
	const pathname = usePathname() ?? "";

	let bestIndex = -1;
	let bestScore = -1;
	tabs.forEach((tab, index) => {
		const prefixes = tab.match ?? [tab.href];
		for (const prefix of prefixes) {
			const score = matchLength(pathname, prefix);
			if (score > bestScore) {
				bestScore = score;
				bestIndex = index;
			}
		}
	});

	return (
		<nav
			className="flex gap-1 overflow-x-auto border-b border-[var(--admin-border)] -mx-1 px-1"
			aria-label="Section"
		>
			{tabs.map((tab, index) => {
				const active = index === bestIndex;
				return (
					<Link
						key={tab.href}
						href={tab.href}
						aria-current={active ? "page" : undefined}
						className={cn(
							"-mb-px shrink-0 rounded-t-lg border-b-2 px-3.5 py-2.5 text-sm font-semibold no-underline transition-colors",
							active
								? "border-[var(--admin-accent)] text-[var(--admin-text)] bg-[var(--admin-accent)]/8"
								: "border-transparent text-[var(--admin-text-muted)] hover:text-[var(--admin-text)] hover:bg-[var(--admin-accent)]/5",
						)}
					>
						{tab.label}
					</Link>
				);
			})}
		</nav>
	);
}