import React from 'react';
import { Divider, Grid, lighten, makeStyles, Typography, } from '@material-ui/core';
import { FluentIconButton } from '../../inputs/buttons/FluentIconButton';
import { getIconFromName } from '../../../utilities/tree/TreeUtilities';
const useStyles = makeStyles(theme => ({
    icon: {
        margin: 'auto 5px auto 0',
        padding: theme.spacing(1),
        backgroundColor: (props) => lighten((props === null || props === void 0 ? void 0 : props.color) ? props.color : theme.palette.info.main, 0.9),
        borderRadius: theme.spacing(3),
    },
    valueContainer: {
        marginRight: theme.spacing(1),
    },
    iconColor: {
        color: (props) => props === null || props === void 0 ? void 0 : props.color,
        borderRadius: theme.spacing(3),
    },
}));
export const Statistic = (props) => {
    const { icon, value, title, color, onClick, hideDivider = false } = props;
    const classes = useStyles({ color: color });
    return (React.createElement("div", null, React.createElement(Grid, { container: true }, !hideDivider && (React.createElement(Grid, { item: true }, React.createElement(Divider, { orientation: "vertical", variant: "middle" }))), icon && (React.createElement(Grid, { item: true, className: classes.icon }, React.createElement(FluentIconButton, { icon: getIconFromName(icon), className: classes.iconColor, onClick: onClick }))), React.createElement(Grid, { item: true, className: classes.valueContainer }, React.createElement(Typography, { variant: "h5" }, value), React.createElement(Typography, { variant: "caption" }, title)))));
};
//# sourceMappingURL=Statistic.js.map