Submatter/apps/web/components/settings/settings-ai-nav.tsx

"use client";

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

import { cn } from "@/lib/utils";

const LINKS = [
  { segment: "providers", label: "Providers" },
  { segment: "role-routing", label: "Role routing" },
] as const;

export function SettingsAiNav({ workspaceSlug }: { workspaceSlug: string }) {
  const pathname = usePathname();
  const base = `/${workspaceSlug}/settings/ai`;

  return (
    <nav className="mb-8 flex gap-1 border-b border-border">
      {LINKS.map((link) => {
        const href = `${base}/${link.segment}`;
        const active = pathname === href || pathname?.startsWith(`${href}/`);
        return (
          <Link
            key={link.segment}
            href={href}
            className={cn(
              "-mb-px border-b-2 px-4 py-2 text-sm font-medium transition-colors",
              active
                ? "border-primary text-foreground"
                : "border-transparent text-muted-foreground hover:text-foreground",
            )}
          >
            {link.label}
          </Link>
        );
      })}
    </nav>
  );
}