const menuItems = [
  {
    name: "Cappuccino",
    photo: "assets/Pictures/Cappocino.png",
    price: "10 E.G.P",
  },
  { name: "Tagen", photo: "assets/Pictures/Tagen.png", price: "40 E.G.P" },
];

const menu = document.getElementById("menu");

menuItems.forEach((item) => {
  const itemDiv = document.createElement("div");
  itemDiv.className = "menu-item";
  itemDiv.innerHTML = `
        <img src="${item.photo}" alt="${item.name}">
        <p>${item.name}</p>
        <p>${item.price}</p>
    `;
  itemDiv.addEventListener("click", () => {
    spawnIframe(item.name);
  });
  menu.appendChild(itemDiv);
});

function spawnIframe(itemName) {
  const iframeContainer = document.getElementById("iframe-container");
  const iframe = document.getElementById("ar-frame");
  iframe.src = "assets/arTab/" + itemName + ".html"; // Path to the AR app
  iframeContainer.style.display = "block";
}

function closeSelf() {
  const iframeContainer = document.getElementById("iframe-container");
  const iframe = document.getElementById("ar-frame");
  iframeContainer.style.display = "none";
}