import React, { useState, useRef } from 'react';
import PropTypes from 'prop-types';
import { Tooltip } from 'reactstrap';

const JKTooltip = props => {
  const [tooltipOpen, setTooltipOpen] = useState(false);
  const iconRef = useRef();
  const toggle = () => setTooltipOpen(!tooltipOpen);

  function handleClick(e) {
    e.preventDefault();
  }
  return (
    <a href="#!" onClick={handleClick}>
      <img
        alt="help"
        ref={iconRef}
        src={require('../../assets/img/icons/question_icon.svg')}
        height="12"
        width="12"
        style={{ opacity: '.7' }}
      />
      <Tooltip placement="auto" isOpen={tooltipOpen} target={iconRef} toggle={toggle}>
        {props.title}
      </Tooltip>
    </a>
  );
};

JKTooltip.propTypes = {
  title: PropTypes.string.isRequired
}

export default JKTooltip;
