import * as React from 'react';
import clsx from 'clsx';
import { useAdaptable } from '../../../AdaptableContext';
import { AdaptableIconComponent } from '../../AdaptableIconComponent';
import { Box } from '../../../../components/Flex';
const baseClassName = 'ab-Adaptable-Popup__TopBar';
export const TopBar = (props) => {
    const adaptable = useAdaptable();
    const applicationIcon = adaptable.api.optionsApi.getUserInterfaceOptions()?.applicationIcon;
    let icon = React.createElement(React.Fragment, null);
    const iconClassName = `${baseClassName}__Icon`;
    if (props.icon === 'ConfigurationIcon') {
        icon = React.createElement(AdaptableIconComponent, { iconClassName: iconClassName, icon: { name: 'settings' } });
    }
    else if (props.icon === 'ApplicationIcon' && applicationIcon) {
        icon = React.createElement(AdaptableIconComponent, { icon: applicationIcon, iconClassName: iconClassName });
    }
    else if (typeof props.icon === 'object') {
        icon = React.createElement(AdaptableIconComponent, { icon: props.icon, iconClassName: iconClassName });
    }
    return (React.createElement(Box, { className: clsx(baseClassName, 'twa:font-medium twa:p-3', 'twa:flex twa:flex-row twa:items-center twa:flex-0 twa:gap-2', 'twa:bg-(--ab-dashboard-header__background) twa:text-(--ab-dashboard-header__color)') },
        icon,
        React.createElement(Box, { className: `${baseClassName}__Title` }, props.children)));
};
export default TopBar;
