import React, { memo } from 'react';
import { ButtonBase, makeStyles, Paper, Tooltip } from '@material-ui/core';
import { FluentIcon } from '../../../utilities/iconLibrary/FluentIcon';
import { UnityFluentIcon } from '../../../utilities/iconLibrary/UnityFluentIcon';
const useStyles = makeStyles(theme => ({
    root: {
        width: 10,
        height: 10,
        paddingTop: theme.spacing(2.5),
        paddingBottom: theme.spacing(5.5),
        paddingLeft: theme.spacing(3.5),
        paddingRight: theme.spacing(5.5),
        margin: theme.spacing(0.25),
        cursor: 'pointer',
        '&:hover': {
            boxShadow: theme.shadows[1],
        },
    },
    images: {
        height: theme.spacing(2.25),
        width: theme.spacing(2.25),
    },
}));
const IconKey = props => {
    const classes = useStyles();
    const { icon, select, tooltip, iconType } = props;
    return (React.createElement(ButtonBase, { onClick: select }, React.createElement(Tooltip, { title: tooltip, placement: "top" }, React.createElement(Paper, { elevation: 0, square: true, className: classes.root, variant: "outlined" }, React.createElement("div", null, iconType === 'unity' ? (React.createElement(UnityFluentIcon, { component: icon })) : (React.createElement(FluentIcon, { component: icon })))))));
};
export default memo(IconKey);
//# sourceMappingURL=FluentIconKey.js.map