// ui-sumberdaya.js — render sumberdaya list (FINAL CLEAN GRID)
export function renderSumberDaya(items = []) {
  const container = document.getElementById("data-sumberdaya");
  if (!container) return;

  if (!Array.isArray(items) || items.length === 0) {
    container.innerHTML = `<p class="muted">Tidak ada data.</p>`;
    return;
  }

  // Map ikon & unit
  const map = {
    listrik:     { icon: "⚡", unit: "Watt" },
    air:         { icon: "💧", unit: "L" },
    suhu:        { icon: "🌡️", unit: "°C" },
    kelembapan:  { icon: "💦", unit: "%" }
  };

  // Filter yang valid saja
  const filtered = items.filter(it =>
    ["listrik", "air", "suhu", "kelembapan"].includes(it.nama.toLowerCase())
  );

  container.innerHTML = filtered.map(it => {
    const key = it.nama.toLowerCase();
    const cfg = map[key] || { icon: "🔧", unit: "" };
    const unitText = cfg.unit ? ` ${cfg.unit}` : "";

    const labelText = it.nama.replace(/\b\w/g, c => c.toUpperCase());

    return `
      <div class="sumber-item">
        <span class="icon">${cfg.icon}</span>
        <span class="label">${labelText}</span>
        <span class="value">${it.nilai}${unitText}</span>
      </div>
    `;
  }).join("");
}
