import React, { forwardRef } from 'react';
import { makeStyles, Tooltip, IconButton } from '@material-ui/core';
import { FluentIcon } from '../../../utilities/iconLibrary/FluentIcon';
import { ChevronDownIcon } from '@fluentui/react-icons';
import PropTypes from 'prop-types';
const useStyles = makeStyles((theme) => ({
    root: {},
    actionHeader: {
        display: 'flex',
        flexDirection: 'row'
    },
    icon: {
        background: theme.palette.common.white,
        padding: theme.spacing(1),
        color: theme.palette.secondary.main
    }
}));
export const AmbientTokenButton = forwardRef(function AmbientTokenButton(props, ref) {
    const { tooltip, ariaLabel, onClick, size, icon = ChevronDownIcon, iconClassName, otherProps, id = 'token-button', udprecordid } = props;
    const classes = useStyles(props);
    return (React.createElement("div", { className: classes.root }, React.createElement(Tooltip, { title: tooltip }, React.createElement(IconButton, Object.assign({ id: id, udprecordid: udprecordid, ref: ref, "aria-label": ariaLabel, className: iconClassName !== null && iconClassName !== void 0 ? iconClassName : classes.icon, size: size !== null && size !== void 0 ? size : 'small', onClick: onClick }, otherProps), React.createElement(FluentIcon, { className: classes.iconButtonStyle, component: icon })))));
});
AmbientTokenButton.propTypes = {
    /**
     * Tooltip to display for button
     */
    tooltip: PropTypes.string.isRequired,
    /**
     * Accessiblity label for icon
     */
    ariaLabel: PropTypes.string.isRequired,
    /**
     * event for button function
     */
    onClick: PropTypes.func,
    /**
     * icon to appear in button
     */
    icon: PropTypes.func.isRequired
};
//# sourceMappingURL=AmbientTokenButton.js.map