import './participation-teasers.scss';
import {ParticipationTeasersData} from "./ParticipationTeasersData";
import {createElement} from "../../_global/scripts/helpers";
import {createParticipationTeaser} from "../../components/participation-teaser/ParticipationTeaserComponent";
import {createButton} from "../../atoms/button/ButtonComponent";
import {createBadge} from "../../atoms/badge/BadgeComponent";

export const createParticipationTeasers = ({
  headline = 'Aktuelle Beteiligungen',
  count = 9,
  items = ParticipationTeasersData,
  buttonLabel = 'Alle aktuellen Beteiligungen',
}) => {
  const section = createElement('section', ['participation-teasers']);
  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);

  hl.appendChild(createBadge({count: count}));

  items.map((item, index) => {
    if (index < 3 && index < count) {
      const col = createElement('div', ['col'], null, row);
      const teaser = createParticipationTeaser({
        ...item, isListItem: false
      })
      col.appendChild(teaser);
    }
  })

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

  return section;
}