import './flockler.scss';
import {createElement} from "../../_global/scripts/helpers";

export const createFlockler = ({
    isCarousel = true,
    backgroundColor = true,
    headline = 'Aktuelles aus Social Media',
}) => {
    const flockler = createElement('div', ['flockler']);
    if (backgroundColor) {
        flockler.classList.add('colored')
    }
    const container = createElement('div', ['container'], null, flockler);

    if (headline && headline.length > 0) {
        createElement('h2', [], headline, container);
    }

    const flocklerDiv = createElement('div', [], null, container);
    if (isCarousel) {
        flocklerDiv.id = 'flockler-embed-1909cf78b700ca8f2ab8c99cf853e256';
    } else {
        flocklerDiv.id = 'flockler-embed-1909cf6ac14089fbe68d7606d3222ca3';
    }

    const flocklerScript = createElement('script', [], null, container);
    flocklerScript.async = true;
    if (isCarousel) {
        flocklerScript.src = 'https://plugins.flockler.com/embed/18c3530f420086988e50456ec8645095/1909cf78b700ca8f2ab8c99cf853e256';
    } else {
        flocklerScript.src = 'https://plugins.flockler.com/embed/18c3530f420086988e50456ec8645095/1909cf6ac14089fbe68d7606d3222ca3';
    }

    return flockler;
}