import React from 'react';
import { Typography, makeStyles, Divider } from '@material-ui/core';
import { Token } from './Token';
import { OpenInNewTabIcon, CalendarIcon } from '@fluentui/react-icons';
import { colors } from '../../../utilities/style/colors';
import PropTypes from 'prop-types';
const useStyles = makeStyles((theme) => ({
    root: {
        display: 'inline-flex',
        alignItems: 'center',
        background: (props) => {
            if (colors.unity.hasOwnProperty(props.color)) {
                return colors.unity[props.color].hint;
            }
            else {
                return colors.unity.info.hint;
            }
        },
        borderRadius: props => props.size === "large" ? 56 / 2.0 : 48 / 2.0,
        margin: theme.spacing(1)
    },
    stickyChild: {
        display: 'inline-table'
    },
}), { name: 'FluentListItem' });
export const Sticky = (props) => {
    const classes = useStyles(props);
    const { text, size, color } = props;
    const typographyVariant = (size === "large") ? "body2" : "body1";
    return (React.createElement("div", { className: classes.root }, React.createElement(Token, { className: classes.stickyChild, icon: CalendarIcon, size: size, color: color }), React.createElement(Typography, { className: classes.stickyChild, variant: typographyVariant }, text !== null && text !== void 0 ? text : ""), React.createElement(Token, { className: classes.stickyChild, icon: OpenInNewTabIcon, variant: "filled", size: size, color: color })));
};
Sticky.propTypes = {
    text: PropTypes.string,
    size: PropTypes.string,
    color: PropTypes.string
};
//# sourceMappingURL=Sticky.js.map