import * as React from 'react';
import SimpleButton from '../SimpleButton';
import join from '../utils/join';
import { Flex } from '../Flex';
export function DashboardToolbar(props) {
    return (React.createElement("div", { className: join('ab-Dashboard__toolbar', props.className) },
        React.createElement("div", { className: "ab-Dashboard__toolbar-content" }, props.children),
        React.createElement(Flex, { className: "ab-Dashboard__toolbar-title twa:items-center twa:justify-center twa:px-2 twa:pb-1 twa:opacity-70", flexDirection: "row" },
            React.createElement("span", { className: "twa:text-2" }, props.title),
            props.showConfigure && (React.createElement(SimpleButton, { "aria-label": `Configure ${props.title}`, icon: "spanner", variant: "text", tone: "none", "data-name": "configure", iconSize: 16, className: "twa:ml-1", tooltip: props.tooltip || `Configure ${props.title}`, onClick: () => props.onConfigure() })),
            props.showClose && (React.createElement(SimpleButton, { "aria-label": `Close ${props.title}`, style: { alignSelf: 'flex-end' }, disabled: props.accessLevel == 'ReadOnly', "data-name": "close", icon: "close", variant: "text", tone: "none", iconSize: 16, className: "twa:ml-1", tooltip: props.tooltip || `Close ${props.title} Toolbar`, onClick: () => props.onClose?.() })))));
}
