siftlode/frontend/src/components/Tabs.tsx

import { usePersistedState } from "../lib/storage";

// Reusable horizontal pill tab-rail for in-page sub-navigation (Configuration, Users & roles…).
// The active tab is persisted to localStorage so a reload (F5) keeps the user where they were,
// per the app's "persist UI state across reload" convention.

export interface TabDef {
  id: string;
  label: string;
  badge?: number; // optional count pill (e.g. pending requests); hidden when 0/undefined
}

/** Persisted active-tab state — the canonical helper now lives in lib/storage as
 * `usePersistedState`; re-exported here under its original name for existing call sites. */
export const usePersistedTab = usePersistedState;

export default function Tabs({
  tabs,
  active,
  onChange,
}: {
  tabs: TabDef[];
  active: string;
  onChange: (id: string) => void;
}) {
  return (
    <div className="flex flex-wrap gap-1 mb-4">
      {tabs.map((tb) => {
        const on = tb.id === active;
        return (
          <button
            key={tb.id}
            onClick={() => onChange(tb.id)}
            className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm transition ${
              on
                ? "bg-accent text-accent-fg font-medium shadow-md shadow-accent/20"
                : "text-muted hover:text-fg hover:bg-card/60"
            }`}
          >
            {tb.label}
            {tb.badge != null && tb.badge > 0 && (
              <span
                className={`text-[11px] leading-none px-1.5 py-0.5 rounded-full ${
                  on ? "bg-accent-fg/20" : "bg-accent/20 text-accent"
                }`}
              >
                {tb.badge}
              </span>
            )}
          </button>
        );
      })}
    </div>
  );
}