import React from 'react';
import classNames from 'classnames';
import styled from 'styled-components';
import Tooltip from './Tooltip';
import HelpIcon from './HelpIcon';

type Props = {
  message: string;
  className?: string;
};

const HelpTooltip = styled(Tooltip)`
  position: absolute;
  padding-left: 3px;
`;

export default class Help extends React.Component<Props> {
  render() {
    const { message, className } = this.props;
    return (
      <HelpTooltip
        className={classNames('is-inline-block', className)}
        message={message}
      >
        <HelpIcon />
      </HelpTooltip>
    );
  }
}