import {
  useModal
} from "./chunk-Q5MIALGZ.js";
import {
  Button
} from "./chunk-FD3JTY5L.js";
import {
  Icon
} from "./chunk-TKIP5Q5H.js";

// src/components/Modal/Header.tsx
import { useEffect, useId } from "react";
import { cross } from "@simplybusiness/icons";
import { jsx, jsxs } from "react/jsx-runtime";
var Header = ({ ref, children, ...otherProps }) => {
  const { onClose, closeLabel, setTitleId } = useModal();
  const titleId = useId();
  useEffect(() => {
    setTitleId(titleId);
  }, [titleId, setTitleId]);
  return /* @__PURE__ */ jsxs(
    "header",
    {
      ref,
      ...otherProps,
      className: "mobius-modal__header",
      id: titleId,
      children: [
        children,
        /* @__PURE__ */ jsxs(
          Button,
          {
            "aria-label": "Close",
            variant: "basic",
            onPress: onClose,
            className: "mobius-modal__close",
            children: [
              /* @__PURE__ */ jsx(Icon, { icon: cross }),
              " ",
              closeLabel
            ]
          }
        )
      ]
    }
  );
};
Header.displayName = "Header";

export {
  Header
};
//# sourceMappingURL=chunk-MPB5F6QL.js.map
