import React from "react";
import { Icone } from "../base/Icone.jsx";
const icones = { sucesso: "circle-check", alerta: "triangle-alert", erro: "circle-x", info: "info" };
/** Faixa de mensagem: sucesso, alerta, erro (anunciado por leitores de tela) ou info. */
export function Aviso({ tipo = "info", titulo, children, aoFechar, className = "" }) {
  return (
    <div className={["ach-aviso", "ach-aviso--" + tipo, className].filter(Boolean).join(" ")} role={tipo === "erro" ? "alert" : "status"}>
      <Icone nome={icones[tipo] || "info"} tamanho={18} className="ach-aviso__icone" />
      <div className="ach-aviso__corpo">
        {titulo && <span className="ach-aviso__titulo">{titulo}</span>}
        {children && <span>{children}</span>}
      </div>
      {aoFechar && <button type="button" className="ach-aviso__fechar" aria-label="Fechar" onClick={aoFechar}><Icone nome="x" tamanho={14} /></button>}
    </div>
  );
}