document.addEventListener("DOMContentLoaded", function () {
    fetch("/api/menu")
        .then(response => response.json())
        .then(data => {
            const menuContainer = document.getElementById("menu-container");
            const menuItems = data.data;

            menuItems.forEach(item => {
                const menuItem = document.createElement("div");
                menuItem.classList.add("menu-item");

                const menuName = document.createElement("div");
                menuName.classList.add("menu-name");
                menuName.textContent = item.name;

                const menuIngredients = document.createElement("div");
                menuIngredients.classList.add("menu-ingredients");
                menuIngredients.textContent = `Ingredients: ${item.ingredients.join(", ")}`;

                menuItem.appendChild(menuName);
                menuItem.appendChild(menuIngredients);

                menuContainer.appendChild(menuItem);
            });
        })
        .catch(error => {
            console.error("Error fetching menu data:", error);
        });
});