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

const DrawerHeader = ({ children, icon, showCloseButton, className, ...props }) => {
    const { onClose, showCloseButton: contextShowCloseButton, theme, } = useDrawerContext();
    const shouldShowCloseButton = showCloseButton !== null && showCloseButton !== void 0 ? showCloseButton : contextShowCloseButton;
    return (jsxs("div", { className: cn(theme.header, 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 min-w-0", children: children })] }), shouldShowCloseButton && (jsx(Button, { color: "neutral", variant: "soft", iconOnly: true, size: "sm", onClick: onClose, "aria-label": "Close drawer", className: "rounded-full shrink-0", children: jsx(XMarkIcon, { className: "size-5" }) }))] }));
};
DrawerHeader.displayName = "Drawer.Header";

export { DrawerHeader };
