"use strict";

const categories = [
  { name: "Wrestling", icon: "assets/icons/wrestling.svg" },
  { name: "Film", icon: "assets/icons/film.svg" },
  { name: "Technik", icon: "assets/icons/technik.svg" },
];

const appContainer = document.getElementById("categories");
const statusRegion = document.getElementById("status");

function buildTile(category) {
  const button = document.createElement("button");
  button.type = "button";
  button.className = "tile";
  button.dataset.category = category.name;

  const img = document.createElement("img");
  img.src = category.icon;
  img.alt = "";
  img.width = 48;
  img.height = 48;

  const label = document.createElement("span");
  label.className = "tile-label";
  label.textContent = category.name;

  button.append(img, label);

  button.addEventListener("click", () => {
    statusRegion.textContent = "Kategorie gewählt: " + category.name;
  });

  return button;
}

document.addEventListener("DOMContentLoaded", () => {
  const tilesContainer = appContainer.querySelector(".tiles");

  const fragment = document.createDocumentFragment();
  categories.forEach((category) => {
    fragment.appendChild(buildTile(category));
  });

  tilesContainer.appendChild(fragment);
});