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

export const SETTINGS_TABS = [
  { href: "/dashboard/settings", label: "Profile", exact: true },
  { href: "/dashboard/settings/security", label: "Security" },
  { href: "/dashboard/settings/audit", label: "Audit log" },
  { href: "/dashboard/settings/legal", label: "Legal" },
] as const;

export function SettingsNav() {
  const pathname = usePathname();
  return (
    <nav className="no-scrollbar flex items-center gap-4 overflow-x-auto border-b border-border text-fg-muted" aria-label="Settings sections">
      {SETTINGS_TABS.map((t) => {
        const active = "exact" in t && t.exact ? pathname === t.href : pathname === t.href || pathname.startsWith(t.href + "/");
        return (
          <Link
            key={t.href}
            href={t.href}
            aria-current={active ? "page" : undefined}
            className={cn("-mb-px whitespace-nowrap border-b-2 pb-2.5 pt-1 text-[13px] font-medium transition-colors hover:text-fg", active ? "border-fg text-fg" : "border-transparent")}
          >
            {t.label}
          </Link>
        );
      })}
    </nav>
  );
}