import { icons } from '../services/icons.js';

export function showBlockedNavigationToast(message = 'Guarda los cambios antes de salir', duration = 3000) {
  const existingToast = document.querySelector('.blocked-nav-toast');
  if (existingToast) {
    existingToast.remove();
  }

  const toast = document.createElement('div');
  toast.className = 'blocked-nav-toast';

  toast.innerHTML = /*html*/`
    <div class="blocked-nav-toast-content">
      ${icons.info}
      <span class="blocked-nav-message">${message}</span>
    </div>
  `;

  document.body.appendChild(toast);

  requestAnimationFrame(() => {
    toast.classList.add('visible');
  });

  setTimeout(() => {
    toast.classList.remove('visible');
    toast.classList.add('hiding');

    setTimeout(() => {
      toast.remove();
    }, 300);
  }, duration);

  return toast;
}