// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { DefaultButton, mergeStyles } from '@fluentui/react';
import { _pxToRem } from "../../../../../acs-ui-common/src";
// eslint-disable-next-line no-restricted-imports
import { Icon, PrimaryButton, Stack, Text, useTheme } from '@fluentui/react';
import React from 'react';
/**
 * A component to show a banner in the UI.
 *
 * @private
 */
export const Banner = (props) => {
    var _a, _b;
    const strings = props.strings;
    const theme = useTheme();
    return React.createElement(Stack, { horizontalAlign: "center" },
        React.createElement(Stack, { "data-ui-id": "banner", className: containerStyles(theme) },
            React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between" },
                React.createElement(Stack, { horizontal: true },
                    ((_a = props.iconProps) === null || _a === void 0 ? void 0 : _a.iconName) && React.createElement(Icon, Object.assign({ className: bannerIconClassName, iconName: (_b = props.iconProps) === null || _b === void 0 ? void 0 : _b.iconName }, props.iconProps)),
                    React.createElement(Text, { className: titleTextClassName }, strings === null || strings === void 0 ? void 0 : strings.title)),
                props.primaryButton ? React.createElement(PrimaryButton, { text: strings === null || strings === void 0 ? void 0 : strings.primaryButtonLabel, ariaLabel: strings === null || strings === void 0 ? void 0 : strings.primaryButtonLabel, onClick: props.onClickButton }) : React.createElement(DefaultButton, { text: strings === null || strings === void 0 ? void 0 : strings.primaryButtonLabel, ariaLabel: strings === null || strings === void 0 ? void 0 : strings.primaryButtonLabel, onClick: props.onClickButton }))));
};
const titleTextClassName = mergeStyles({
    fontWeight: 400,
    fontSize: _pxToRem(14),
    lineHeight: _pxToRem(16),
    alignSelf: 'center'
});
const containerStyles = (theme) => mergeStyles({
    boxShadow: theme.effects.elevation8,
    width: '20rem',
    padding: '0.75rem',
    borderRadius: '0.25rem',
    position: 'relative',
    backgroundColor: theme.palette.white
});
const bannerIconClassName = mergeStyles({
    fontSize: '1.25rem',
    alignSelf: 'center',
    marginRight: '0.5rem',
    svg: {
        width: '1.25rem',
        height: '1.25rem'
    }
});
//# sourceMappingURL=Banner.js.map