const loadLinks = async () => {
  const linkContainer = document.getElementById("links");

  if (!linkContainer) {
    return;
  }

  linksList = await fetchJson("./data/links.json");
  const linkCards = linksList.map(buildLinkCard);
  linkContainer.replaceChildren(...linkCards);
};

const buildLinkCard = (item, index) => {
  const card = document.createElement("a");
  card.classList.add("link-card", `tone-${item.tone ?? "mint"}`);
  card.href = item.url;
  card.target = "_blank";
  card.rel = "noreferrer";

  const indexBadge = document.createElement("span");
  indexBadge.classList.add("link-card__index");
  indexBadge.textContent = formatIndex(index);

  const badge = document.createElement("span");
  badge.classList.add("link-card__badge");
  badge.textContent = item.key;
  loadIcon(item.key).then((svg) => (badge.innerHTML = svg));

  const body = document.createElement("span");
  body.classList.add("link-card__body");

  const name = document.createElement("span");
  name.classList.add("link-card__name");
  name.textContent = item.name;

  const label = document.createElement("span");
  label.classList.add("link-card__label");
  label.textContent = item.label;

  const arrow = document.createElement("span");
  arrow.classList.add("link-card__arrow");
  arrow.textContent = "open";

  body.append(name, label);
  card.append(indexBadge, badge, body, arrow);

  return card;
};