import {createElement} from "../../_global/scripts/helpers";
import {createHeader} from "../../components/header/HeaderComponent";
import {createMagazineHeader} from "../../components/magazine-header/MagazineHeaderComponent";
import {createPageDetails} from "../../components/page-details/PageDetailsComponent";
import {createMagazineCover} from "../../components/magazine-cover/MagazineCoverComponent";
import {createTeasersSection} from "../../sections/teasers/TeasersComponent";
import {createFooter} from "../../components/footer/FooterComponent";
import {createCommonContentArticle} from "../../components/common-content-article/CommonContentArticleComponent";

export const createCommonContentPage = ({
  kicker = 'Titelthema',
  headline = '5 Beispiele, wie sich Unternehmen für ihr Umfeld engagieren',
}) => {
  const page = createElement('div', ['page', 'magazine-article']);
  const header = createHeader({isZip: true});
  const magazineHeader = createMagazineHeader({ size: 'narrow' });
  page.appendChild(header);
  page.appendChild(magazineHeader);

  const wrapper = createElement('div', ['page-wrapper'], null, page);
  wrapper.appendChild(createPageDetails({}));

  const pageContent = createElement('main', ['page-content'], null, wrapper);
  pageContent.appendChild(createMagazineCover({}));

  const container = createElement('div', ['container'], null, pageContent);
  const row = createElement('div', ['row'], null, container);
  const article = createCommonContentArticle({});
  row.appendChild(article);

  pageContent.appendChild(createTeasersSection({type: 'magazine', showReadingTime: true, headline: 'Mehr interessante Artikel'}))

  page.appendChild(createFooter({}));

  return page;
}