import { ReactNode } from "react";
import { createPortal } from "react-dom";

export default function Drawer({
  open,
  title,
  children,
  onClose
}: {
  open: boolean;
  title: string;
  children: ReactNode;
  onClose: () => void;
}) {
  if (!open) return null;

  return createPortal(
    <div className="modal d-block" style={{ background: "rgba(0,0,0,.35)" }} role="dialog">
      <div className="modal-dialog modal-dialog-end">
        <div className="modal-content h-100">
          <div className="modal-header">
            <h5 className="modal-title">{title}</h5>
            <button className="btn-close" onClick={onClose} aria-label="close" />
          </div>
          <div className="modal-body p-0">
            <div className="p-3">{children}</div>
          </div>
        </div>
      </div>
    </div>,
    document.body
  );
}