/**
 * <Drawer> — painel de detalhe que entra pela direita.
 *
 * Cópia do NetScreen AI (public/js/components/drawer.jsx). A única diferença é
 * o `largura`: o detalhe de um item, com quatro etapas, pede mais do que max-w-md.
 *
 * Regra do NetScreen AI (docs/padroes-interface.md): o painel lateral é para
 * espreitar, nunca para preencher. As acções abrem um <Modal> por cima.
 */

function Drawer({ aberto, onFechar, eyebrow, titulo, subtitulo, rodape, largura = 'max-w-md', children }) {
  const painelRef = React.useRef(null);
  const tituloId = React.useId();

  useDialogo(painelRef, aberto, onFechar);

  if (!aberto) return null;

  return ReactDOM.createPortal(
    <div className="fixed inset-0 z-50 flex justify-end">
      <div
        className="drawer-overlay absolute inset-0 bg-black/70"
        onClick={() => onFechar()}
        aria-hidden="true"
      />

      <div
        ref={painelRef}
        role="dialog"
        aria-modal="true"
        aria-labelledby={tituloId}
        tabIndex={-1}
        className={`drawer-panel relative flex h-full w-full ${largura} flex-col border-l border-border bg-background outline-none`}
      >
        <header className="flex shrink-0 items-start gap-4 border-b border-border p-5">
          <div className="min-w-0 flex-1">
            {eyebrow && <div className="mb-2">{eyebrow}</div>}
            <h2 id={tituloId} className="font-display text-3xl leading-none">
              {titulo}
            </h2>
            {subtitulo && <div className="mt-2 text-sm text-muted-foreground">{subtitulo}</div>}
          </div>
          <button
            type="button"
            onClick={() => onFechar()}
            className="-mr-1 p-1 text-muted-foreground hover:text-foreground"
            aria-label="Fechar"
          >
            <IconFechar size={18} />
          </button>
        </header>

        <div className="flex-1 overflow-y-auto p-5">{children}</div>

        {rodape && (
          <footer className="flex shrink-0 flex-wrap items-center gap-2 border-t border-border p-5">
            {rodape}
          </footer>
        )}
      </div>
    </div>,
    document.body
  );
}