import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
	Popup as SemanticPopup
} from 'semantic-ui-react';

import * as styles from './Style.less';

export default class Tooltip extends Component {
	static propTypes = {
		header: PropTypes.any.isRequired,
		content: PropTypes.any,
		children: PropTypes.element.isRequired,
		position: PropTypes.string
	};

	static defaultProps = {
		content: null,
		position: 'top center'
	};

	render() {
		return this.props.header || this.props.content ? (
			<SemanticPopup
				className={styles.Tooltip}
				trigger={React.Children.only(this.props.children)}
				header={this.props.header}
				content={this.props.content && (
					<div className="content">
						{this.props.content}
					</div>
				)}
				position={this.props.position || null}
				hoverable
			/>
		) : (
			React.Children.only(this.props.children)
		);
	}
}
