/** @license MIT | @cube-dev/ui-kit v0.127.1 | Cube Dev Team */
import { extractStyles } from "../../../utils/styles.js";
import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
import { _Item } from "../Item/Item.js";
import { CloseIcon } from "../../../icons/CloseIcon.js";
import { useDialogContext } from "../../overlays/Dialog/context.js";
import { useLayoutPanelContext } from "./LayoutContext.js";
import { CONTAINER_STYLES, tasty } from "@tenphi/tasty";
import { forwardRef, useCallback } from "react";
import { jsx } from "react/jsx-runtime";

//#region src/components/content/Layout/LayoutPanelHeader.tsx
const PanelHeaderElement = tasty(_Item, {
	qa: "PanelHeader",
	shape: "sharp",
	type: "header",
	styles: {
		border: "bottom",
		boxSizing: "content-box",
		"$inline-padding": "($content-padding, 1x)"
	}
});
function LayoutPanelHeader(props, ref) {
	const { title, level = 3, isClosable, onClose, actions, children, ...otherProps } = props;
	const styles = extractStyles(otherProps, CONTAINER_STYLES);
	const dialogContext = useDialogContext();
	const panelContext = useLayoutPanelContext();
	const handleClose = useCallback(() => {
		onClose?.();
		panelContext?.onOpenChange(false);
		dialogContext?.onClose?.();
	}, [
		onClose,
		panelContext,
		dialogContext
	]);
	return /* @__PURE__ */ jsx(PanelHeaderElement, {
		ref,
		level,
		size: "large",
		actions: actions ?? (isClosable ? /* @__PURE__ */ jsx(ItemAction, {
			icon: /* @__PURE__ */ jsx(CloseIcon, {}),
			"aria-label": "Close panel",
			onPress: handleClose
		}) : null),
		styles,
		...otherProps,
		children: title ?? children
	});
}
const _LayoutPanelHeader = forwardRef(LayoutPanelHeader);
_LayoutPanelHeader.displayName = "Layout.PanelHeader";

//#endregion
export { _LayoutPanelHeader };
//# sourceMappingURL=LayoutPanelHeader.js.map