import { jsxs, jsx } from 'react/jsx-runtime';
import { cn } from '../../../utils/cn.js';
import { useModalContext } from './Modal.js';
import { Button } from '../Button/Button.js';
import 'react';
import { XMarkIcon } from '@heroicons/react/24/outline';

const ModalHeader = ({ children, icon, showCloseButton, className, ...props }) => {
    const { onClose, showCloseButton: contextShowCloseButton, theme, isBodyScrollable, } = useModalContext();
    const shouldShowCloseButton = showCloseButton !== null && showCloseButton !== void 0 ? showCloseButton : contextShowCloseButton;
    return (jsxs("div", { className: cn(theme.header, isBodyScrollable && "border-[var(--color-border)] relative", className), ...props, children: [jsxs("div", { className: cn(theme.headerContent), children: [icon && (jsx("div", { className: "flex-shrink-0 text-[var(--color-text-secondary)]", children: icon })), jsx("div", { className: "flex-1", children: children })] }), shouldShowCloseButton && (jsx("div", { className: "", children: jsx(Button, { color: "neutral", variant: "soft", iconOnly: true, size: "sm", onClick: onClose, "aria-label": "Close modal", className: "rounded-full", children: jsx(XMarkIcon, { className: "size-5" }) }) }))] }));
};
ModalHeader.displayName = "Modal.Header";

export { ModalHeader };
