const wrapper = document.querySelector(".notifications");
const err = document.getElementById("err");
const war = document.getElementById("war");

const toast = (message, type) => {
	const notification = document.createElement("div");

	notification.innerHTML = `
		<i class="fa fa-xmark close" onclick="this.parentNode.remove()"></i>
        <i class="fa-solid ${
					type === "error" ? "fa-circle-xmark" : "fa-triangle-exclamation"
				} icon"></i>
    
      <div class="notification-content">
        <h3>${type}</h3>
        <p>${message}</p>
      </div>
    `;
	notification.classList.add(...["notification", type]);
	wrapper.appendChild(notification);
	setTimeout(() => {
		notification.remove();
	}, 10000);
};

err.addEventListener("click", (e) => {
	toast(
		"Can't generate the code jdsoejdk te the code jdsoejdk te the code jdsoejdkte the code jdsoejdkte the code jdsoejdkte the code jdsoejdk",
		"error"
	);
});
war.addEventListener("click", (e) => {
	toast("no prompt selected", "warning");
});