import React from 'react';
import { Typography, Avatar, makeStyles, alpha } from '@material-ui/core';
import { UnityFluentIcon } from '../../../utilities/iconLibrary/UnityFluentIcon';
import { getIconFromName } from '../../../utilities/tree/TreeUtilities';
const useStyles = makeStyles((theme) => ({
    customTimelineHeader: {
        backgroundColor: alpha(theme.palette.secondary.main, 0.1),
        borderRadius: theme.spacing(4),
        padding: theme.spacing(0.5, 2, 0.5, 0.5),
        display: 'flex',
        alignItems: 'center'
    },
    customTimelineHeaderAvatar: {
        marginRight: theme.spacing(1),
        height: theme.spacing(4),
        width: theme.spacing(4)
    },
    flexDescription: {
        fontSize: '0.875rem',
        marginLeft: theme.spacing(2)
    }
}));
export const FluentTimelineHeader = (props) => {
    const { title, date, iconName } = props;
    const classes = useStyles();
    return (React.createElement("div", { className: classes.customTimelineHeader }, React.createElement(Avatar, { className: classes.customTimelineHeaderAvatar }, React.createElement(UnityFluentIcon, { size: "medium", icon: getIconFromName(iconName !== null && iconName !== void 0 ? iconName : 'PageListIcon'), type: "" })), React.createElement(Typography, { variant: "subtitle2" }, title), React.createElement(Typography, { variant: "caption", color: "textSecondary", className: classes.flexDescription }, date)));
};
//# sourceMappingURL=FluentTimelineHeader.js.map