import './commonContent-article.scss';
import {createElement} from "../../_global/scripts/helpers";
import {lorem2} from "../../_global/scripts/lorem";
import {createBlockquote} from "../../atoms/blockquote/BlockquoteComponent";
import {createContact} from "../contact/ContactComponent";
import {createPrintShare} from "../print-share/PrintShareComponent";
import {createInfobox} from "../infobox/InfoboxComponent";
import {createTopicTeasersSection} from "../../sections/topic-teasers/TopicTeasersComponent";
import {createCommonContent} from "../common-content/CommonContentComponent";

export const createCommonContentArticle = ({
  addArticleComponents = true,
  kicker = 'Titelthema',
  headline = '5 Beispiele, wie sich Unternehmen für ihr Umfeld engagieren',
}) => {
  const div = createElement('div');
  const article = createElement('article', ['col', 'magazine-article'], null, div);

  if (addArticleComponents) {
    createElement('p', ['kicker'], kicker, article);
    createElement('h1', [], headline, article);
  }
  article.appendChild(createCommonContent({}));

  const wrapper = createElement('div', ['content'], null, div);
  wrapper.appendChild(createTopicTeasersSection({maxItems: 6}));

  const article2 = createElement('article', ['col', 'magazine-article'], null, div);
  article2.appendChild(createInfobox({content: lorem2}));
  article2.appendChild(createBlockquote({}));
  article2.appendChild(createContact({}));
  article2.appendChild(createPrintShare({}));

  return div;
}