import {OverlayTrigger, Tooltip} from "react-bootstrap";
import React, {useState} from "react";

export function Notification({id, tip, content}) {
    const [show, setShow] = useState(true);
    const onClickHandler = (event) => {
        // prevent removing badge on touchables
        if (!event.target.classList.contains("options-badge"))
            setShow(false);
    };

    return (
        <div className="options-notification" onClick={onClickHandler}>
            {content}
            {show ? <OverlayTrigger
                placement="auto"
                trigger={['click', 'hover', 'focus']}
                style={{display: 'inline'}}
                overlay={<Tooltip id={id}>{tip}</Tooltip>}
            >
                <span className="options-badge"></span>
            </OverlayTrigger> : null}

        </div>
    )
}