import {OverlayTrigger, Tooltip} from "react-bootstrap";
import React, {useEffect, useState, useRef} from "react";
import {useClickAway} from "./useClickAway";

export function Notification({id, tip, content}) {
    const [show, setShow] = useState(false);

    useEffect(() => {
        setTimeout(() => {
            setShow(true)
        }, 100);

        setTimeout(() => {
            setShow(false)
        }, 5000);
    }, []);

    return (
            <OverlayTrigger
                placement="top"
                trigger={["click", "hover"]}
                style={{display: 'inline'}}
                show={show}
                onToggle={() => setShow(false)}
                overlay={<Tooltip id={id}>{tip}</Tooltip>}
                rootClose
            >
                {content}
            </OverlayTrigger>
    )
}