import React__default, { Fragment } from "react";
import { jsxs, jsx } from "../node_modules/.pnpm/@emotion_react@11.10.4_q4mq7tnhdumujvomvw24zx33y4/node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js";
const Flyout = ({
  title,
  component = () => {
  },
  children,
  isVisible,
  setVisible
}) => {
  const closeModal = () => setVisible(false);
  const showModal = () => setVisible(true);
  return /* @__PURE__ */ jsxs(Fragment, {
    children: [component({
      onShow: showModal
    }), isVisible && /* @__PURE__ */ jsx("div", {
      className: "relative z-10 transition-opacity duration-500 ease-in-out",
      "aria-labelledby": "slide-over-title",
      role: "dialog",
      "aria-modal": "true",
      children: /* @__PURE__ */ jsx("div", {
        className: "inset-0 overflow-hidden fixed1",
        children: /* @__PURE__ */ jsx("div", {
          className: "inset-0 overflow-hidden absolute1",
          children: /* @__PURE__ */ jsx("div", {
            className: "fixed inset-y-0 right-0 flex max-w-full pl-10 transition duration-500 ease-in-out transform pointer-events-none sm:duration-700",
            children: /* @__PURE__ */ jsxs("div", {
              className: "relative w-screen max-w-md pointer-events-auto",
              children: [/* @__PURE__ */ jsx("div", {
                className: "absolute top-0 left-0 flex pt-4 pr-2 -ml-8 sm:-ml-10 sm:pr-4",
                children: /* @__PURE__ */ jsxs("button", {
                  type: "button",
                  onClick: () => closeModal(),
                  className: "text-gray-300 rounded-md hover:text-white focus:outline-none focus:ring-2 focus:ring-white",
                  children: [/* @__PURE__ */ jsx("span", {
                    className: "sr-only",
                    children: "\u5173\u95ED"
                  }), /* @__PURE__ */ jsx("svg", {
                    className: "w-6 h-6",
                    fill: "none",
                    viewBox: "0 0 24 24",
                    strokeWidth: "1.5",
                    stroke: "currentColor",
                    "aria-hidden": "true",
                    children: /* @__PURE__ */ jsx("path", {
                      strokeLinecap: "round",
                      strokeLinejoin: "round",
                      d: "M6 18L18 6M6 6l12 12"
                    })
                  })]
                })
              }), /* @__PURE__ */ jsxs("div", {
                className: "flex flex-col h-full py-6 overflow-y-scroll bg-white shadow-xl",
                children: [/* @__PURE__ */ jsx("div", {
                  className: "px-4 sm:px-6",
                  children: /* @__PURE__ */ jsx("h2", {
                    className: "text-lg font-medium text-gray-900",
                    id: "slide-over-title",
                    children: title
                  })
                }), /* @__PURE__ */ jsx("div", {
                  className: "relative flex-1 px-4 mt-6 sm:px-6",
                  children: React__default.Children.map(children, (child) => {
                    if (!React__default.isValidElement(child)) {
                      return null;
                    }
                    const config = {
                      ...child.props,
                      onClose: closeModal,
                      onShow: showModal
                    };
                    return React__default.cloneElement(child, config);
                  })
                })]
              })]
            })
          })
        })
      })
    })]
  });
};
export {
  Flyout
};
//# sourceMappingURL=Flyout.js.map
