baron-sso/devfront/src/features/clients/ClientDetailTabs.tsx

import { Link } from "react-router-dom";
import { t } from "../../lib/i18n";
import { cn } from "../../lib/utils";

type ClientDetailTab = "connection" | "consents" | "settings" | "relationships";

interface ClientDetailTabsProps {
  activeTab: ClientDetailTab;
  clientId: string;
}

const tabOrder: Array<{
  key: ClientDetailTab;
  href: (clientId: string) => string;
  labelKey?: string;
}> = [
  { key: "connection", href: (clientId) => `/clients/${clientId}` },
  {
    key: "consents",
    href: (clientId) => `/clients/${clientId}/consents`,
  },
  { key: "settings", href: (clientId) => `/clients/${clientId}/settings` },
  {
    key: "relationships",
    href: (clientId) => `/clients/${clientId}/relationships`,
  },
];

export function ClientDetailTabs({
  activeTab,
  clientId,
}: ClientDetailTabsProps) {
  return (
    <div className="flex gap-6 overflow-x-auto border-b border-border pb-3 text-sm font-bold">
      {tabOrder.map((tab) => {
        const isActive = tab.key === activeTab;
        const labelKey =
          tab.labelKey ?? `ui.dev.clients.details.tab.${tab.key}`;
        return isActive ? (
          <span
            key={tab.key}
            className="whitespace-nowrap border-b-2 border-primary pb-1 text-primary"
          >
            {t(labelKey)}
          </span>
        ) : (
          <Link
            key={tab.key}
            to={tab.href(clientId)}
            className={cn(
              "whitespace-nowrap border-b-2 border-transparent text-muted-foreground hover:text-foreground",
            )}
          >
            {t(labelKey)}
          </Link>
        );
      })}
    </div>
  );
}