import React from 'react';
import { Avatar, makeStyles, Typography } from '@material-ui/core';
import FluentDisplayNumber from '../atoms/FluentDisplayNumbers';
import { MarketIcon, MarketDownIcon } from '@fluentui/react-icons';
import { FluentIcon } from '../../../../utilities/iconLibrary/FluentIcon';
const useStyles = makeStyles((theme) => ({
    root: {
        display: 'flex',
        flexDirection: 'row'
    },
    caption: {
        textAlign: 'left'
    },
    captionSmall: {
        textAlign: 'center'
    },
    trend: {
        marginTop: theme.spacing(2),
        marginLeft: theme.spacing(1)
    },
    upIcon: {
        color: 'green'
    },
    downIcon: {
        color: '#D50000'
    },
    avatar: {
        backgroundColor: 'white'
    }
}), { next: 'FluentStatNumber' });
const FluentStatNumber = (props) => {
    const classes = useStyles();
    const { small, trend, label, number } = props;
    return (React.createElement("div", { className: classes.root }, React.createElement("div", null, React.createElement("div", null, React.createElement(FluentDisplayNumber, { small: small, number: Math.abs(number) })), React.createElement("div", { className: !small ? classes.caption : classes.captionSmall }, React.createElement(Typography, { variant: "overline" }, label))), React.createElement("div", { className: classes.trend }, small && (React.createElement(Avatar, { className: classes.avatar }, trend === 'down' ? (React.createElement(FluentIcon, { component: MarketDownIcon, className: classes.downIcon })) : (React.createElement(FluentIcon, { component: MarketIcon, className: classes.upIcon })))))));
};
export default FluentStatNumber;
//# sourceMappingURL=FluentStatNumber.js.map