import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { CrossOutlineMd } from '../../icons/CrossOutlineMd';
import { IconButton } from '../IconButton';
import { bottomDrawerClassnames, DEFAULT_HEADER_HEIGHT } from './constants';
import { Body, Header, HeaderTitle, StyledDrawer } from './styles';
export const BottomDrawer = ({ title, drawerHeaderHeight = DEFAULT_HEADER_HEIGHT, children, onClose, headerContent, ...props }) => {
    const handleClose = (event) => {
        if (onClose) {
            onClose(event, 'escapeKeyDown');
        }
    };
    return (_jsxs(StyledDrawer, { ...props, anchor: "bottom", onClose: onClose, children: [_jsxs(Header, { drawerHeaderHeight: drawerHeaderHeight, className: bottomDrawerClassnames.header, children: [_jsx(HeaderTitle, { variant: "h6", noWrap: true, children: title }), headerContent, _jsx(IconButton, { variant: "text", onClick: handleClose, size: "medium", children: _jsx(CrossOutlineMd, {}) })] }), _jsx(Body, { className: bottomDrawerClassnames.content, children: children })] }));
};
