import './howto-list.scss';
import {createElement, createImage} from "../../_global/scripts/helpers";
import {howToListData} from "./HowToListData";

export const createHowToList =
  ({
     listItems: listItems = howToListData,
     headline = 'Wie funktioniert’s?',
     text = 'Bestimmen Sie die wirtschaftliche Ausrichtung ihrer Region mit! Wählen Sie die nächste Vollversammlung ihrer IHK. Hier erfahren Sie ganz genau, wie sie mitmachen.',
  }) => {
    const div = createElement('div', ['howto-list','variant-base'], null);
    const div2 = createElement('div', ['howto-list--left'], null, div);
    createElement('h2', [], headline, div2);
    createElement('p', [], text, div2);
    const ul = createElement('ul', [], null, div);
    listItems.map((item) => {
      const li = createElement('li', [], null, ul);
      createElement('div', ['icon-box', item.icon], null, li);
      createElement('h3', [], item.headline, li);
      createElement('p', [], item.text, li);
      createElement('span', [], item.more, li);
      if (item.copy && item.copy.length > 0) {
        createElement('p', [], item.copy, li);
      }
      const teaserLink = createElement('a', ['teaser--link'], '', li);
      teaserLink.href = item.link;
      teaserLink.setAttribute('aria-label', 'Beschreibender Link-Text');
    })
    return div;
  }