export async function loadWohnhaus(data) {
  const container = document.querySelector(".building-ui");

  container.innerHTML = `
    <div id="wohnhaus-ui">

      <div id="avatar"></div>

      <div id="inventory"></div>

    </div>
  `;

  loadAvatar();
  loadInventory();
}

async function loadAvatar() {
  const res = await fetch("/api/avatar");
  const avatar = await res.json();

  let html = `<div class="avatar">`;

  avatar.forEach((i) => {
    html += `<img src="${i.icon}" class="${i.slot}">`;
  });

  html += "</div>";

  document.getElementById("avatar").innerHTML = html;
}

async function loadInventory() {
  const res = await fetch("/api/inventory");
  const items = await res.json();

  let html = "";

  items.forEach((item) => {
    const icon = item.icon ? item.icon : "/images/items/default.png";
    const name = item.name ? item.name : "Unbekannt";

    html += `
          <div class="inventory-item"
          data-id="${item.id}"
          data-level="${item.level}">
          <img src="${icon}">
          <p>${name}</p>
          </div>
          `;
  });

  document.getElementById("inventory").innerHTML = html;
}