/**
 * Icon with popover help text
 *
 * @author Denis Makarov
 * @date 2021-07-27
 */

import * as React from 'react';
import * as styles from './helpPopover.m.scss';
import {Popover} from '../popover/Popover';
import {Icon} from '../icon/Icon';
import {PLACEMENT, SIZE, TRIGGER} from '../../constants';
import {IconIntent} from '@unidata/icon';

interface IProps {
    iconSize?: SIZE;
    placement?: PLACEMENT;
    trigger?: TRIGGER;
}

export class HelpPopover extends React.Component<IProps> {
    override render () {
        return (
            <Popover
                placement={this.props.placement || PLACEMENT.TOP}
                trigger={this.props.trigger || TRIGGER.HOVER}
                target={(
                    <div className={styles.helpIcon}>
                        <Icon
                            intent={IconIntent.SECONDARY}
                            size={this.props.iconSize || SIZE.MIDDLE}
                            name='question-circle'/>
                    </div>
                )}>
                {this.props.children}
            </Popover>
        );
    }
}