import './event-teasers-large.scss';
import {EventTeasersLargeData} from "./EventTeasersLargeData";
import {createElement} from "../../_global/scripts/helpers";
import {createButton} from "../../atoms/button/ButtonComponent";
import {createEventTeaserLarge} from "../../components/event-teaser-large/EventTeaserLargeComponent";

export const createEventTeasersLarge = ({
  headline = 'Gründung und Nachfolge',
  count = 9,
  widemode = false,
  events = EventTeasersLargeData,
  buttonLabel = 'Alle aktuellen Beteiligungen',
}) => {
  const section = createElement('section', ['event-teasers-large']);
  const hlContainer = createElement('div', ['container'], null, section);
  const hl = createElement('h2', [], headline, hlContainer);
  const wrapper = createElement('div', ['overflow-wrapper'], null, section);
  const container = createElement('div', ['container'], null, wrapper);
  const row = createElement('div', ['row'], null, container);


  events.map((event, index) => {
    if (index < 3 && index < count) {
      const col = createElement('div', ['col'], null, row);
      const teaser = createEventTeaserLarge({
        ...event, widemode : widemode,
      })
      col.appendChild(teaser);
    }
  })

  if (count > 3) {
    const all = createElement('div', ['all-participations'], null, section);
    const btn = createButton({label:buttonLabel});
    all.appendChild(btn);
  }

  return section;
}