stack/apps/web/src/components/settings/FleetSettingsNav.tsx

"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { Card, CardContent } from "@/components/ui/card";

interface FleetSettingsLink {
  href: string;
  label: string;
}

const FLEET_SETTINGS_LINKS: FleetSettingsLink[] = [
  { href: "/settings/providers", label: "Providers" },
  { href: "/settings/agent-config", label: "Agent Config" },
  { href: "/settings/auth", label: "Authentication" },
];

export function FleetSettingsNav(): React.JSX.Element {
  const pathname = usePathname();

  return (
    <Card>
      <CardContent className="px-4 py-3 flex flex-wrap items-center gap-2">
        <Link
          href="/settings"
          className="inline-flex h-9 items-center rounded-md px-3 text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
        >
          All Settings
        </Link>

        {FLEET_SETTINGS_LINKS.map((link) => {
          const isActive = pathname === link.href;

          return (
            <Link
              key={link.href}
              href={link.href}
              className={`inline-flex h-9 items-center rounded-md px-3 text-sm font-medium transition-colors ${
                isActive
                  ? "bg-primary text-primary-foreground"
                  : "text-muted-foreground hover:text-foreground hover:bg-muted"
              }`}
            >
              {link.label}
            </Link>
          );
        })}
      </CardContent>
    </Card>
  );
}