import './topic-teasers.scss';
import $ from 'jquery';
import {createElement} from "../../_global/scripts/helpers";
import {Topics, TopicsWithLinklist} from "./TopicTeasersData";
import {createTopicTeaser} from "../../components/topic-teaser/TopicTeaserComponent";
import IHKTopicTeasers from "./topic-teasers";

export const createTopicTeasersSection = ({
  headline = 'Unsere Themensammlung',
  type = 'single-topic',
  maxItems = 6,
  data = type === 'single-topic' ? Topics : TopicsWithLinklist,
}) => {
  const section = createElement('section', ['topics']);
  section.dataset.type = type === 'single-topic' ? 'single' : 'list';

  const container = createElement('div', ['container'], null, section);
  if (headline && headline.length > 0) {
    createElement('h2', [], headline, container);
  }

  const row = createElement('div', ['row'], null, container);

  data.map((topic, i) => {
    if (i < maxItems) {
      const col = createElement('div', ['col'], null, row);
      const teaser = createTopicTeaser({...topic, type: type});
      col.appendChild(teaser);
    }
  })

  new IHKTopicTeasers($(section));

  return section;
}