import React from 'react'
import PropTypes from 'prop-types'
import { makeStyles } from '@material-ui/styles'
import { Tooltip } from '@material-ui/core'
import HelpOutlineIcon from '@material-ui/icons/HelpOutline'

const useStyles = makeStyles(
  {
    icon: {
      verticalAlign: 'middle',
      width: 16,
      height: 16,
      marginLeft: 2,
      position: 'relative',
      top: '-1px',
    },
    tooltip: {
      fontSize: '.9em',
    },
  },
  { name: 'helpTooltip' }
)

/**
 * Help Icon with integrated tooltip.
 *
 * @component
 */
const HelpTooltip = ({ title, ...props }) => {
  const classes = useStyles()

  return (
    <Tooltip title={title} classes={{ tooltip: classes.tooltip }} {...props}>
      <HelpOutlineIcon className={classes.icon} fontSize="small" />
    </Tooltip>
  )
}

HelpTooltip.propTypes = {
  /** Content of the tooltip */
  title: PropTypes.node,
}

export default HelpTooltip