import './document-list.scss';
import {createElement, createImage} from "../../_global/scripts/helpers";
import {DocumentListData} from "./DocumentListData";

export const createDocumentList = ({
  docs = DocumentListData,
}) => {
  const section = createElement('section', ['document-list']);
  docs.map((doc) => {
    const a = createElement('a', ['document-list-item', doc.icon], null, section);
    a.href = doc.link;

    if (doc.imageSrc && doc.imageSrc.length > 0) {
      const imageBox = createElement('div', ['image-box'], null, a);
      createImage(doc.imageSrc, 210, 140, doc.title, [], imageBox);
    } else if (doc.chartTitle && doc.chartTitle.length > 0) {
      const imageBox = createElement('div', ['image-box'], null, a);
      imageBox.classList.add('chart');
      createElement('span', ['chart-title'], doc.chartTitle, imageBox);
    }

    const textBox = createElement('div', ['text-box'], null, a);
    createElement('span', ['kicker'], doc.kicker, textBox);
    createElement('h6', [], doc.title, textBox);
    if (doc.copy && doc.copy.length > 0) {
      createElement('p', [], doc.copy, textBox);
    }
    if (doc.details && doc.details.length > 0) {
      createElement('p', ['details'], doc.details, textBox);
    }
  })

  return section;
}