import React, { Fragment } from 'react';
import { makeStyles, Typography } from '@material-ui/core';
import { DeveloperToolsIcon } from '@fluentui/react-icons';
import { Token } from '../../components/dataDisplay/Token';
import PropTypes from 'prop-types';
const useStyles = makeStyles((theme) => ({
    root: {},
    label: {
        color: theme.palette.common.black
    }
}));
/**
 * @param {{label: string, icon: React.ElementType, color: string}} props
 */
export const TokenGroupItem = ({ label, icon = DeveloperToolsIcon, color }) => {
    const classes = useStyles();
    return (React.createElement(Fragment, null, React.createElement(Token, { icon: icon, color: color, size: "small", variant: "filled", type: "icon" }), React.createElement(Typography, { variant: "caption", className: classes.label }, " ", label, " ")));
};
TokenGroupItem.propTypes = {
    /**
     * Label to display in list.
     */
    label: PropTypes.string,
    /**
     * Icon to display in grouping.
     */
    icon: PropTypes.bool,
    /**
    * sets color of token background
    */
    color: PropTypes.string,
};
//# sourceMappingURL=TokenGroupItem.js.map