// Rôle : fournit un contrôle d'onglets réutilisable avec rôles ARIA.
export function Tabs({ tabs, activeTab, onChange, className = "", iconOnly = false }) {
  return (
    <div className={`tabs ${className}`.trim()} role="tablist">
      {tabs.map((tab) => {
        const active = tab.id === activeTab;
        return (
          <button
            key={tab.id}
            className={active ? "active" : ""}
            type="button"
            role="tab"
            aria-selected={active}
            aria-label={tab.label}
            title={tab.label}
            onClick={() => onChange(tab.id)}
          >
            {tab.icon && <span className={`module-icon-svg module-icon-${tab.icon}`} aria-hidden="true" />}
            {!iconOnly && <span>{tab.label}</span>}
          </button>
        );
      })}
    </div>
  );
}
