function showNotification(type, message, duration = 5000) {
	const container = document.querySelector(".notification-container");
	const notification = document.createElement("div");
	notification.classList.add("notification", `notification-${type}`);
	notification.innerHTML = `
        <div class="notification-icon">${getIconForType(type)}</div>
        <div class="notification-content">
            <div class="notification-title">${type}</div>
            <div class="notification-message">${message}</div>
        </div>
        <button class="notification-close" onclick='this.parentNode.remove()' aria-label="Close notification">X</button>`;

	container.appendChild(notification);
	if (duration > 0) {
		setTimeout(() => {
			closeNotification(notification);
		}, duration);
	}
}

function closeNotification(notification) {
	notification.classList.add("hide");
	setTimeout(() => {
		notification.remove();
	}, 300);
}

function getIconForType(type) {
	switch (type) {
		case "error":
			return "❌";
		case "warning":
			return "⚠️";
		case "success":
			return "✅";
		case "info":
			return "ℹ️";
		default:
			return "";
	}
}