import { useState } from "react";
import "../styles/tooltip.scss";
import { InfoCircle, Clock } from "react-bootstrap-icons";

function Tooltip(props) {
  const [showMessage, setShowMessage] = useState(false);
  const { text, iconStyle } = props;
  const showClock = iconStyle === "clock";
  return (
    <div
      className="tooltip-container"
      onMouseEnter={() => setShowMessage(true)}
      onMouseLeave={() => setShowMessage(false)}
    >
      {showClock ? (
        <Clock className="infocircle-icon" size="16px" />
      ) : (
        <InfoCircle className="infocircle-icon" size="16px" />
      )}
      {showMessage ? <span className="tooltip-text">{text}</span> : <></>}
    </div>
  );
}

export default Tooltip;