import React from 'react';
import { makeStyles } from '@material-ui/core';
import clsx from 'clsx';
import { ChromeCloseIcon } from '@fluentui/react-icons';
import PropTypes from 'prop-types';
const useStyles = makeStyles((theme) => ({
    root: {},
    hover: {
        position: 'absolute',
        top: 16,
        left: (props) => (props.offset ? props.offset : 20),
        padding: theme.spacing(3),
        paddingTop: (props) => props.popover ? theme.spacing(1) : theme.spacing(2),
        paddingRight: theme.spacing(2),
        background: theme.palette.common.white,
        boxShadow: `0px 24px 38px 3px rgb(0 0 0 / 14%), 0px 9px 46px 8px rgb(0 0 0 / 12%), 0px 11px 15px -7px rgb(0 0 0 / 20%)`,
        borderRadius: theme.spacing(1),
        zIndex: 99,
        minWidth: 190
    },
    close: {
        cursor: 'pointer'
    },
    displayHeader: {
        position: 'absolute',
        right: theme.spacing(2),
        top: theme.spacing(1)
    }
}));
export const TimelineHoverCard = (props) => {
    const { children } = props;
    const classes = useStyles(props);
    const { className, popover = true } = props;
    return (React.createElement("div", { className: clsx(classes.root, className) }, React.createElement("div", { className: classes.hover }, React.createElement("div", { className: classes.displayHeader }, popover && (React.createElement("div", { className: classes.close }, React.createElement(ChromeCloseIcon, { style: { width: 10, height: 10 } })))), children)));
};
TimelineHoverCard.propTypes = {
    children: PropTypes.node,
    className: PropTypes.string,
    popover: PropTypes.bool,
    offset: PropTypes.number
};
//# sourceMappingURL=TimelineHoverCard.js.map