import React from "react";
import { Icone } from "../base/Icone.jsx";
/** Diálogo modal. Fecha com Esc, clique no fundo ou no X. */
export function Dialogo({ aberto = false, titulo, descricao, children, acoes, aoFechar, largura }) {
  React.useEffect(() => {
    if (!aberto) return;
    const tecla = (e) => { if (e.key === "Escape" && aoFechar) aoFechar(); };
    document.addEventListener("keydown", tecla);
    return () => document.removeEventListener("keydown", tecla);
  }, [aberto, aoFechar]);
  if (!aberto) return null;
  return (
    <div className="ach-dialogo" onClick={aoFechar}>
      <div className="ach-dialogo__caixa" role="dialog" aria-modal="true" aria-label={typeof titulo === "string" ? titulo : undefined} style={largura ? { width: "min(" + largura + "px, 100%)" } : undefined} onClick={(e) => e.stopPropagation()}>
        <div className="ach-dialogo__cabecalho">
          <div>
            {titulo && <h2 className="ach-dialogo__titulo">{titulo}</h2>}
            {descricao && <p className="ach-dialogo__descricao">{descricao}</p>}
          </div>
          {aoFechar && <button type="button" className="ach-botao ach-botao-icone ach-botao--fantasma ach-botao--pequeno" aria-label="Fechar" onClick={aoFechar}><Icone nome="x" tamanho={16} /></button>}
        </div>
        {children}
        {acoes && <div className="ach-dialogo__acoes">{acoes}</div>}
      </div>
    </div>
  );
}