'use client';

interface TabBarProps<T extends string> {
  tabs: { id: T; label: string }[];
  active: T;
  onChange: (id: T) => void;
}

/** Reiterleiste der Finanzbuchhaltungs-Module — Muster Zertifikat-Manager. */
export function TabBar<T extends string>({ tabs, active, onChange }: TabBarProps<T>) {
  return (
    <nav className="flex gap-6 overflow-x-auto border-b border-border">
      {tabs.map((tab) => (
        <button
          key={tab.id}
          type="button"
          onClick={() => onChange(tab.id)}
          aria-current={active === tab.id ? 'page' : undefined}
          className={`pb-2 text-sm font-medium transition-colors ${
            active === tab.id
              ? 'border-b-2 border-primary-strong font-semibold text-foreground'
              : 'text-muted-foreground hover:text-foreground'
          }`}
        >
          {tab.label}
        </button>
      ))}
    </nav>
  );
}