/**
 * Stage 03：列表渲染
 * 用循环对数组中的每个数据项调用渲染函数
 */

/**
 * 根据用户数据生成卡片 DOM 节点
 * @param {{ name: string, age: number, tag: string }} user
 * @returns {HTMLDivElement}
 */
function generateUser(user) {
  const card = document.createElement("div");
  card.className = "user-card";

  const name = document.createElement("h2");
  name.textContent = "姓名: " + user.name;

  const age = document.createElement("p");
  age.textContent = "年龄: " + user.age;

  const tag = document.createElement("span");
  tag.textContent = user.tag;

  card.appendChild(name);
  card.appendChild(age);
  card.appendChild(tag);
  return card;
}

/**
 * 将用户卡片挂载到指定容器
 * @param {{ name: string, age: number, tag: string }} user
 * @param {HTMLElement} container
 */
function renderUser(user, container) {
  container.appendChild(generateUser(user));
}

const multiUser = [
  { name: "小明", age: 18, tag: "学生" },
  { name: "小王", age: 19, tag: "学生" },
  { name: "小李", age: 20, tag: "学生" },
  { name: "小孙", age: 56, tag: "校长" },
  { name: "小赵", age: 43, tag: "老师" },
];

const root = document.getElementById("minivue");
for (let i = 0; i < multiUser.length; i++) {
  renderUser(multiUser[i], root);
}