/**
 * Stage 02：声明式渲染
 * 把“数据 → DOM”封装为函数，数据变了只需重新调用函数
 */

/**
 * 根据用户数据生成卡片 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 user = { name: "小明", age: 18, tag: "学生" };

const root = document.getElementById("minivue");
renderUser(user, root);