import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect } from "react";
import { ToastContainer, toast } from "react-toastify";
import "./style.scss";
import { ClickableText } from "..";
const ToastWithButton = ({ heading = "🦄 Wow so easy!", subText = "🦄 Wow so easy!", showToast = false, delay = 5000, showButtons = false, btnText = "Apply", onBtnClick = () => { }, onClose = () => { }, }) => {
    const notify = () => {
        const toastId = toast(_jsxs("div", { className: "genericToast--body", children: [_jsxs("div", { children: [heading, _jsx("span", { children: subText })] }), showButtons && (_jsxs("div", { className: "genericToast--footer", children: [_jsx(ClickableText, { onClick: onBtnClick, showIcon: false, sizeVariant: "sm", text: btnText, colorVariant: "orange" }), _jsx(ClickableText, { onClick: () => {
                                toast.dismiss(toastId);
                                onClose();
                            }, showIcon: false, sizeVariant: "sm", text: "Dismiss", colorVariant: "gray" })] }))] }), {
            position: "top-right",
            autoClose: delay,
            hideProgressBar: true,
            closeOnClick: true,
            pauseOnHover: false,
            draggable: true,
            progress: undefined,
            theme: "dark",
            onClose: () => {
                onClose();
                toast.dismiss(toastId);
            },
        });
    };
    useEffect(() => {
        if (showToast) {
            notify();
        }
    }, []);
    return (_jsx("div", { children: _jsx(ToastContainer, { limit: 1, closeButton: false }) }));
};
export default ToastWithButton;
