// ┌┐ ┬ ┬┌┬┐┌┬┐┌─┐┌┐┌┌─┐
// ├┴┐│ │ │  │ │ ││││└─┐
// └─┘└─┘ ┴  ┴ └─┘┘└┘└─┘
// Function to print Button Cards.

const generateFirstButtonsContainer = () => {
  for (const button of CONFIG.firstButtonsContainer) {
    let item = `
        <a
          href="${button.link}"
          target="${CONFIG.openInNewTab ? '_blank' : ''}"
          class="card button button__${button.id}"
        >
          <img class="buttonIcon" src="assets/icons/arcticons/png/${button.icon}.png" />
        </a>
    `;

    const position = 'beforeend';

    buttons_1.insertAdjacentHTML(position, item);
  }
};

const generateSecondButtonsContainer = () => {
  for (const button of CONFIG.secondButtonsContainer) {
    let item = `
        <a
          href="${button.link}"
          target="${CONFIG.openInNewTab ? '_blank' : ''}"
          class="card button button__${button.id}"
        >
          <img class="buttonIcon" src="assets/icons/arcticons/png/${button.icon}.png" />
        </a>
    `;

    const position = 'beforeend';

    buttons_2.insertAdjacentHTML(position, item);
  }
};

const generateButtons = () => {
  switch (CONFIG.bentoLayout) {
    case 'bento':
      generateFirstButtonsContainer();
      break;
    case 'buttons':
      generateFirstButtonsContainer();
      generateSecondButtonsContainer();
      break;
    default:
      break;
  }
};

generateButtons();