widget.js

const BabyNameWidget = {
  async init(containerId) {
    try {
      const res = await fetch("https://babynames.netstudy.in/api/random-name");
      const data = await res.json();

      const container = document.getElementById(containerId);

      container.innerHTML = `
      <div style="border:1px solid #e5e5e5;padding:16px;border-radius:10px;font-family:Arial;max-width:320px;background:#fafafa">
        <h3 style="margin:0 0 10px 0;">${data.name}</h3>
        <p style="margin:4px 0;"><strong>Meaning:</strong> ${data.meaning}</p>
        <p style="margin:4px 0;"><strong>Origin:</strong> ${data.origin}</p>
        <button onclick="BabyNameWidget.refresh('${containerId}')" 
          style="margin-top:10px;padding:6px 10px;border:none;background:#333;color:#fff;border-radius:5px;cursor:pointer">
          New Name
        </button>
        <div style="margin-top:10px;font-size:12px;">
          Powered by 
          <a href="https://babynames.netstudy.in" target="_blank">
          BabyNames.netstudy
          </a>
        </div>
      </div>
      `;
    } catch (err) {
      console.error("Widget error", err);
    }
  },

  refresh(containerId) {
    this.init(containerId);
  }
};