import React from "react";
import { Icone } from "../base/Icone.jsx";
/** Select nativo com a cara do sistema. */
export function Seletor({ nome, rotulo, ajuda, erro, opcoes = [], id, className = "", style, ...rest }) {
  const idc = id || "seletor-" + nome;
  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">
        <select id={idc} name={nome} aria-invalid={erro ? true : undefined} {...rest}>
          {opcoes.map((o) => <option key={o.valor} value={o.valor} disabled={o.desabilitado}>{o.rotulo}</option>)}
        </select>
        <Icone nome="chevron-down" tamanho={16} className="ach-campo__seta" />
      </div>
      {ajuda && !erro && <span className="ach-campo__ajuda">{ajuda}</span>}
      {erro && <span className="ach-campo__erro" role="alert">{erro}</span>}
    </div>
  );
}