import "../Drawer.css";
import { jsxs, jsx } from "react/jsx-runtime";
import { Drawer } from "antd";
import Button from "./Button.js";
import Icon from "./Icon.js";
import { useTheme } from "./Theme/UI.js";
import "./Theme/themeUtils.js";
import "./Theme/themes.js";
const body = "Drawer_body_11717";
const header = "Drawer_header_11717";
const headerTitle = "Drawer_headerTitle_11717";
const mobileWidth = "Drawer_mobileWidth_11717";
const css = {
  body,
  header,
  headerTitle,
  mobileWidth
};
const DrawerComponent = ({
  children,
  maskClosable = true,
  open,
  placement,
  title,
  onClose
}) => {
  const {
    themeSettings: { className: themeClass }
  } = useTheme();
  const rootClasses = [css.mobileWidth, themeClass];
  return /* @__PURE__ */ jsxs(
    Drawer,
    {
      bodyStyle: { padding: 0 },
      closable: false,
      maskClosable,
      open,
      placement,
      rootClassName: rootClasses.join(" "),
      width: "700px",
      onClose,
      children: [
        /* @__PURE__ */ jsxs("div", { className: css.header, children: [
          /* @__PURE__ */ jsx("div", { className: css.headerTitle, children: title }),
          /* @__PURE__ */ jsx(
            Button,
            {
              icon: /* @__PURE__ */ jsx(Icon, { name: "close", size: "small", title: "Close drawer" }),
              type: "text",
              onClick: onClose
            }
          )
        ] }),
        /* @__PURE__ */ jsx("div", { className: css.body, children })
      ]
    }
  );
};
export {
  DrawerComponent as default
};
