import React from "react";
/** Campo de formulário com rótulo, ajuda e erro ligados por acessibilidade. */
export function Campo({ nome, rotulo, ajuda, erro, prefixo, sufixo, tipo = "text", id, className = "", style, ...rest }) {
  const idc = id || "campo-" + nome;
  const idAjuda = ajuda ? idc + "-ajuda" : undefined;
  const idErro = erro ? idc + "-erro" : undefined;
  return (
    <div className={["ach-campo", erro ? "ach-campo--erro" : "", className].filter(Boolean).join(" ")} style={style}>
      {rotulo && <label className="ach-campo__rotulo" htmlFor={idc}>{rotulo}</label>}
      <div className="ach-campo__controle">
        {prefixo && <span className="ach-campo__afixo">{prefixo}</span>}
        <input id={idc} name={nome} type={tipo} aria-invalid={erro ? true : undefined} aria-describedby={[idAjuda, idErro].filter(Boolean).join(" ") || undefined} {...rest} />
        {sufixo && <span className="ach-campo__afixo">{sufixo}</span>}
      </div>
      {ajuda && !erro && <span id={idAjuda} className="ach-campo__ajuda">{ajuda}</span>}
      {erro && <span id={idErro} className="ach-campo__erro" role="alert">{erro}</span>}
    </div>
  );
}