"use client";

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

/**
 * Sidebar link that highlights when its route is active. "/admin" matches
 * exactly; every other entry also matches its sub-routes (e.g. /admin/radio is
 * active on /admin/radio/history) so the current section stays lit.
 */
export function AdminNavLink({ href, label }: { href: string; label: string }) {
  const pathname = usePathname() ?? "";
  const active =
    href === "/admin" ? pathname === "/admin" : pathname === href || pathname.startsWith(`${href}/`);

  return (
    <Link href={href} className={`admin-nav-link${active ? " active" : ""}`}>
      {label}
    </Link>
  );
}