// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React, { useMemo } from 'react';
import { ControlBarButton, useTheme } from "../../../../../../react-components/src";
import { concatStyleSets } from '@fluentui/react';
import { CallCompositeIcon } from '../../../common/icons';
import { controlButtonBaseStyle } from '../../styles/Buttons.styles';
const icon = () => React.createElement(CallCompositeIcon, { iconName: 'ControlButtonParticipants' });
/**
 * @private
 */
/** @beta */
export const People = (props) => {
    const { strings, onRenderOnIcon, onRenderOffIcon, onClick } = props;
    const theme = useTheme();
    const styles = useMemo(() => {
        var _a;
        return concatStyleSets({
            rootChecked: {
                background: theme.palette.neutralLight
            }
        }, (_a = props.styles) !== null && _a !== void 0 ? _a : {}, controlButtonBaseStyle);
    }, [props.styles, theme.palette.neutralLight]);
    return React.createElement(ControlBarButton, Object.assign({}, props, { "data-ui-id": "call-composite-participants-button", strings: strings, labelKey: 'peopleButtonLabelKey', onRenderOnIcon: onRenderOnIcon !== null && onRenderOnIcon !== void 0 ? onRenderOnIcon : icon, onRenderOffIcon: onRenderOffIcon !== null && onRenderOffIcon !== void 0 ? onRenderOffIcon : icon, onClick: onClick, styles: styles }));
};
//# sourceMappingURL=People.js.map