import {createElement} from "../../_global/scripts/helpers";
import {createHeader} from "../../components/header/HeaderComponent";
import {createMagazineCover} from "../../components/magazine-cover/MagazineCoverComponent";
import {createMagazineArticle} from "../../components/magazine-article/MagazineArticleComponent";
import {createTileGrid} from "../../sections/tile-grid/TileGridComponent";
import {createFooter} from "../../components/footer/FooterComponent";
import {lorem1, lorem2} from "../../_global/scripts/lorem";

export const createTileGridPage = ({

}) => {
  const page = createElement('div', ['page']);
  page.appendChild(createHeader({}));

  const wrapper = createElement('div', ['page-wrapper'], null, page);
  const pageContent = createElement('div', ['page-content'], null, wrapper);
  const article = createMagazineArticle({addArticleComponents: false});

  pageContent.appendChild(createMagazineCover({
    showReadingTime: false,
    imageSrc: 'https://source.unsplash.com/g_DTWgRypfE/1110x440',
  }));

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

  createElement('p', ['kicker'], 'IHK Musterstadt', article);
  createElement('h1', [], 'IHKtransparent', article);
  createElement('p', ['initial'], lorem1, article);
  createElement('p', [], lorem2, article);

  page.appendChild(createFooter({}))

  return page;
}