"use client";

import clsx from "clsx";

/**
 * The tab strip used across settings pages. Each page decides its own tabs;
 * this keeps them looking and behaving the same.
 */
export function SettingsTabs({
  tabs,
  active,
  onChange,
}: {
  tabs: { id: string; label: string }[];
  active: string;
  onChange: (id: string) => void;
}) {
  return (
    <div className="set-tabs">
      {tabs.map((t) => (
        <button
          key={t.id}
          onClick={() => onChange(t.id)}
          className={clsx("set-tab", active === t.id && "on")}
        >
          {t.label}
        </button>
      ))}
    </div>
  );
}