function progressBar(toastId, duration) {
  const progressBar = {
    progress: 0,
    paused: false,

    animateToastProgress() {
      const toast = document.getElementById(toastId);
      if (!toast) return;
      const bar = document.getElementById([toastId, "progress"].join("-"));

      const startTime = performance.now();
      let totalPausedTime = 0;
      let pauseStartTime = null;

      const animate = (currentTime) => {
        const toast = document.getElementById(toastId);
        if (!toast) return; // Toast was manually removed

        if (this.paused) {
          // Track when pause started
          if (pauseStartTime === null) {
            pauseStartTime = currentTime;
          }
          // Keep animating while paused
          requestAnimationFrame(animate);
          return;
        } else {
          // If we were paused, accumulate the paused time
          if (pauseStartTime !== null) {
            totalPausedTime += currentTime - pauseStartTime;
            pauseStartTime = null;
          }
        }

        // Calculate actual elapsed time (excluding paused time)
        const elapsed = currentTime - startTime - totalPausedTime;
        this.progress = Math.min((elapsed / duration) * 100, 100) + "%";
        bar.style["width"] = this.progress;


        if (elapsed >= duration) {
          toast.remove()
        } else {
          requestAnimationFrame(animate);
        }
      };

      requestAnimationFrame(animate);
    }
  };
  progressBar.animateToastProgress();
  return progressBar;
}