let notificationCenterComponent = null;

function alertMessage() {
    var styles = `
    
    notification-center-component .mantine-yiqa98, notification-center-component > span {
        float: right;
        top: 14px;
        right: 7px;
        color: #FFFFFF;

    }

    notification-center-component .mantine-yiqa98, notification-center-component button >  svg{
        
        color: #FFF !important;

    }
    .mantine-1ruj4iy{
        display:none;
    }


    .mantine-ry1naz{
        
         display:none;
    }
    .mantine-14tgpg6 {

        top: 40px !important;
    }

    .css-egzh6z{
        background : #2b9af3 !important;
        opacity :10px !important;
    }
    .css-i09ofx  {
        background : #2b9af3 !important;
    }
    .css-bg5as0{
        color: #FFFFFF !important;
    }
    .css-rsc8rt{
        color: #FFFFFF !important;
        opacity:0.9 !important;

    }
    .css-1x5fqmk{
        background:#2b9af3 !important;
    }
    .css-du7jxp{
        color: #FFFFFF !important;

    }
    .css-9zjhve{
        color: #FFFFFF !important;

    }
    
    `

    var styleSheet = document.createElement("style")
    styleSheet.innerText = styles
    document.head.appendChild(styleSheet)
    if (!notificationCenterComponent) {
        // Create the notification-center-component element
        notificationCenterComponent = document.createElement("notification-center-component");

        // Set attributes for the notification-center-component element
        notificationCenterComponent.setAttribute("application-identifier", "J2zhqQ96-mCJ");
        notificationCenterComponent.setAttribute("subscriber-id", "Passvault");

        // Append the notification-center-component to the body of the document
        document.body.appendChild(notificationCenterComponent);

        // Create a new script element to load the web component's JavaScript file
        let scriptElement = document.createElement('script');
        scriptElement.src = "https://web-component.novu.co/index.js";


        document.head.appendChild(scriptElement);

        // Define the onLoad callback function
        function onLoadCallback() {
            console.log("hello world!");
            // var styles = `

            //     notification-center-component .mantine-yiqa98, notification-center-component > span {
            //         float: right;
            //         top: 14px;
            //         right: 7px;
            //     }
            //     `

            // var styleSheet = document.createElement("style")
            // styleSheet.innerText = styles
            // document.head.appendChild(styleSheet)
        }

        // Wait for the script to load before accessing the notification-center-component
        scriptElement.onload = function () {
            // Find the notification-center-component element
            let nc = document.querySelector("notification-center-component");
            // Assign the onLoad callback to the onLoad property of the notification-center-component
            nc.onLoad = onLoadCallback;
        };
    }

}