// Copyright: © 2026 TWWIM UG. All rights reserved. (www.twwim.com)
/**
 * TabBar — 4-tab nav for PluginSettingsPage.
 *
 * Pure presentational; selection state lives in the parent so other widgets
 * (e.g. validation summary) can drive tab focus on demand.
 *
 * @layer Presentation
 */

import type { TFunction } from '../lib/constants';

export type PluginSettingsTab = 'visibility' | 'snippet' | 'welcome' | 'idle';

interface TabBarProps {
  active: PluginSettingsTab;
  onChange: (next: PluginSettingsTab) => void;
  t: TFunction;
}

const TABS: ReadonlyArray<{ id: PluginSettingsTab; labelKey: string }> = [
  { id: 'visibility', labelKey: 'tenants.pluginSettings.tabs.visibility' },
  { id: 'snippet', labelKey: 'tenants.pluginSettings.tabs.snippet' },
  { id: 'welcome', labelKey: 'tenants.pluginSettings.tabs.welcome' },
  { id: 'idle', labelKey: 'tenants.pluginSettings.tabs.idle' },
];

export function TabBar({ active, onChange, t }: TabBarProps) {
  return (
    <div
      className="border-b border-gray-200"
      role="tablist"
      aria-label="Plugin settings sections"
    >
      <nav className="flex gap-1 -mb-px overflow-x-auto">
        {TABS.map((tab) => {
          const isActive = tab.id === active;
          return (
            <button
              key={tab.id}
              type="button"
              role="tab"
              aria-selected={isActive}
              data-tab={tab.id}
              onClick={() => onChange(tab.id)}
              className={
                isActive
                  ? 'px-4 py-2.5 text-sm font-semibold border-b-2 border-cyan-600 text-cyan-700 whitespace-nowrap'
                  : 'px-4 py-2.5 text-sm font-medium border-b-2 border-transparent text-gray-500 hover:text-gray-800 hover:border-gray-300 whitespace-nowrap transition-colors'
              }
            >
              {t(tab.labelKey)}
            </button>
          );
        })}
      </nav>
    </div>
  );
}