import './topic-teaser.scss';
import {createElement} from "../../_global/scripts/helpers";
import {createLinkList} from "../linklist/LinkListComponent";
import lottie from 'lottie-web';

export const createTopicTeaser = ({
  type = 'single-topic',
  title = 'Hallo Welt',
  link = '#',
  icon = 'Eule Doktorhut',
  lottieFile = null,
  linklistData = null,
}) => {
  const tile = createElement(type === 'single-topic' ? 'a' : 'div', ['tile', 'topic-teaser','variant-base', type], null);
  tile.href = link;
  const iconBox = createElement('div', ['icon-box', ...(lottieFile ? ['icon-box--lottie'] : ['pictogram-topic-' + icon.toLowerCase().split(' ').join('-')])], null, tile);
  if (lottieFile) {
    lottie.loadAnimation({ container: iconBox, renderer: 'svg', loop: true, autoplay: true, path: lottieFile });
  }
  const textBox = createElement('div', ['text-box'], null, tile);
  createElement('h4', ['title'], title, textBox);

  if (type === 'topic-linklist') {
    const data = linklistData ? linklistData : {};
    const ll = createLinkList(data);
    textBox.appendChild(ll);
  }

  return tile;
}