import React from "react";
/** Abas sublinhadas em laranja. Controladas: ativa + aoMudar. */
export function Abas({ itens = [], ativa, aoMudar, className = "" }) {
  return (
    <div className={"ach-abas " + className} role="tablist">
      {itens.map((it) => (
        <button key={it.id} role="tab" type="button" aria-selected={it.id === ativa} className={["ach-abas__aba", it.id === ativa ? "ach-abas__aba--ativa" : ""].filter(Boolean).join(" ")} onClick={() => aoMudar && aoMudar(it.id)}>
          {it.icone}
          {it.rotulo}
          {it.contador != null && <span className="ach-abas__contador">{it.contador}</span>}
        </button>
      ))}
    </div>
  );
}