function createH2(headerName) {
  return `<h2>${headerName}</h2><section>`;
}

function createFigure(imageURL, heading, subheading) {
  return `<figure> 
    <img src="${imageURL}"> 
    <figcaption> 
    <b>${heading}</b><br>
    <em>${subheading}</em>
    </figcaption>
    </figure>`;
}

function createSection(headerName, figureArray) {
  let figuresHTML = "";
  for (let i = 0; i < figureArray.length; i++) {
    let figure = figureArray[i];
    figuresHTML = figuresHTML.concat(
      createFigure(figure.url, figure.main, figure.sub)
    );
  }
  return `<section>${figuresHTML}</section>`
}

function figureGrid(jsonURL, targetID) {
  fetch(source)
    .then((response) => response.json())
    .then((json) => {
      let html = "";
      for (const headerName in json) {
        let figureArray = json[category];
        html = html.concat(createSection(headerName, figureArray));
      }
      const thisScript = document.getElementById("albums");
      return html;
    });
}

class FigureGrid extends HTMLElement {
  static observedAttributes = ["src"];
  constructor() {
    super();
    this._internals = this.attachInternals();
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name == "src") {
      this.innerHTML =  
    }
  }
}

customElements.define("figure-grid", FigureGrid);