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

export function Notification({id, tip, content}) {
    const [show, setShow] = useState(true);
    return (
        <div className="" onClick={() => setShow(false)}>
            {content}
            <OverlayTrigger
                placement="auto"
                trigger={['click', 'hover', 'focus']}
                style={{display: show ? 'inline' : "hidden"}}
                overlay={<Tooltip id={id}>{tip}</Tooltip>}
            >
                <img src="/images/shop/icon-notification.svg" className="options-notification" style={{display: show ? 'inline' : "hidden"}}/>
            </OverlayTrigger>
        </div>
    )
}