import * as React from 'react';
import clsx from 'clsx';
import { ButtonInfo } from '../../Buttons/ButtonInfo';
import { Box, Flex } from '../../../../components/Flex';
export const PopupPanel = (props) => {
    const baseClassName = 'ab-Adaptable-Popup__Panel';
    return (React.createElement(Box, { className: clsx('twa:flex-1 twa:flex twa:flex-col twa:gap-3 twa:p-1', props.className, baseClassName, props.scrollable === false ? 'twa:overflow-hidden' : 'twa:overflow-auto') },
        React.createElement("div", { className: `${baseClassName}__Header twa:flex` },
            React.createElement(Flex, { alignItems: "center" },
                React.createElement(Box, { className: "twa:mr-0", "data-name": "space-before" }),
                React.createElement("div", { className: `${baseClassName}__Header__Title` }, props.headerText),
                React.createElement(Box, { className: "twa:mr-2", "data-name": "space-after" }),
                props.infoLink != null && !props.infoLinkDisabled && (React.createElement(ButtonInfo, { tone: "none", variant: "text", iconSize: 24, onClick: () => window.open(props.infoLink, '_blank' // <- opens the link in a new tab or window.
                    ) }))),
            React.createElement(Box, { className: "twa:flex-1" }),
            props.button),
        React.createElement(Box, { className: clsx('twa:w-full twa:flex twa:flex-col twa:flex-1 twa:min-h-0', `${baseClassName}__Body`, props.bodyClassName) }, props.children)));
};
