import { c } from "react-compiler-runtime";
import React, { useState } from "react";
import { Typography, lighten, makeStyles } from "@material-ui/core";
import PropTypes from "prop-types";
//#region src/componentSystems/multiThreadTimeline/ui/TimelineDot.jsx
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, .8),
		borderRadius: 4,
		padding: theme.spacing(1),
		paddingTop: theme.spacing(.5),
		paddingBottom: theme.spacing(.5),
		marginTop: theme.spacing(1),
		textTransform: "capitalize",
		position: "absolute",
		top: 70,
		left: -31,
		width: 115
	}
}));
const TimelineDot = (props) => {
	const $ = c(16);
	const { hoverContent, title, hideLable: t0 } = props;
	const hideLable = t0 === void 0 ? true : t0;
	const classes = useStyles(props);
	const [hover] = useState(false);
	const t1 = hover ? "inline" : "none";
	let t2;
	if ($[0] !== t1) {
		t2 = { display: t1 };
		$[0] = t1;
		$[1] = t2;
	} else t2 = $[1];
	let t3;
	if ($[2] !== classes.hover || $[3] !== hoverContent || $[4] !== t2) {
		t3 = /* @__PURE__ */ React.createElement("div", {
			className: classes.hover,
			style: t2
		}, hoverContent);
		$[2] = classes.hover;
		$[3] = hoverContent;
		$[4] = t2;
		$[5] = t3;
	} else t3 = $[5];
	let t4;
	if ($[6] !== classes.dot || $[7] !== t3) {
		t4 = /* @__PURE__ */ React.createElement("div", { className: classes.dot }, t3);
		$[6] = classes.dot;
		$[7] = t3;
		$[8] = t4;
	} else t4 = $[8];
	let t5;
	if ($[9] !== classes.title || $[10] !== hideLable || $[11] !== title) {
		t5 = !hideLable && /* @__PURE__ */ React.createElement("div", { className: classes.title }, /* @__PURE__ */ React.createElement(Typography, null, /* @__PURE__ */ React.createElement("span", { style: { fontWeight: 700 } }, " ", title)));
		$[9] = classes.title;
		$[10] = hideLable;
		$[11] = title;
		$[12] = t5;
	} else t5 = $[12];
	let t6;
	if ($[13] !== t4 || $[14] !== t5) {
		t6 = /* @__PURE__ */ React.createElement("div", null, t4, t5);
		$[13] = t4;
		$[14] = t5;
		$[15] = t6;
	} else t6 = $[15];
	return t6;
};
TimelineDot.propTypes = {
	hoverContent: PropTypes.node,
	title: PropTypes.string,
	hideLable: PropTypes.bool,
	color: PropTypes.string
};
//#endregion
export { TimelineDot };

//# sourceMappingURL=TimelineDot.mjs.map