import React, { useState } from 'react';
import { lighten, makeStyles, Typography } from '@material-ui/core';
import PropTypes from 'prop-types';
const useStyles = makeStyles((theme) => ({
    root: {},
    dot: {
        width: theme.spacing(2),
        height: theme.spacing(2),
        background: (props) => props.color ? props.color : theme.palette.secondary.main,
        borderRadius: 50,
        margin: theme.spacing(2),
        color: theme.palette.common.white
    },
    hover: {
        position: 'relative'
    },
    title: {
        transform: 'rotate(90deg)',
        background: lighten(theme.palette.common.black, 0.8),
        borderRadius: 4,
        padding: theme.spacing(1),
        paddingTop: theme.spacing(0.5),
        paddingBottom: theme.spacing(0.5),
        marginTop: theme.spacing(1),
        textTransform: 'capitalize',
        position: 'absolute',
        top: 70,
        left: -31,
        width: 115
    }
}));
export const TimelineDot = (props) => {
    const { hoverContent, title, hideLable = true } = props;
    const classes = useStyles(props);
    const [hover, setHover] = useState(false);
    return (React.createElement("div", null, React.createElement("div", { className: classes.dot }, React.createElement("div", { className: classes.hover, style: { display: hover ? 'inline' : 'none' } }, hoverContent)), !hideLable && (React.createElement("div", { className: classes.title }, React.createElement(Typography, null, React.createElement("span", { style: { fontWeight: 700 } }, " ", title))))));
};
TimelineDot.propTypes = {
    hoverContent: PropTypes.node,
    title: PropTypes.string,
    hideLable: PropTypes.bool,
    color: PropTypes.string
};
//# sourceMappingURL=TimelineDot.js.map