import './superlist-entry.scss';
import $ from 'jquery';
import {createElement, createImage} from "../../_global/scripts/helpers";
import {createButton} from "../../atoms/button/ButtonComponent";

export const createSuperlistEntrySection = ({
    icon = 'pictogram-fernglas',
    headline = 'Klimaneutral bis 2050',
    paragraph = 'Klimaschutz als klares Ziel verankern und verlässliche Rahmenbedingungen für Wirtschaft und Gesellschaft schaffen.',
    inverted = false,
    centered = false,
    showInStorybook = false,
}) => {
    // Container does not belong to module
    let onlyForStorybook,
        section;
    if (showInStorybook) {
        onlyForStorybook = createElement('div', centered ? ['superlist', 'variant-subtle-primary', 'centered'] : ['superlist', 'variant-subtle-primary']);
    }
    const variant = centered ? null : inverted ? 'variant-solid' : 'variant-base';
    const sectionClasses = ['superlist-entry', ...(inverted ? ['inverted'] : []), ...(variant ? [variant] : [])];
    section = createElement('div', sectionClasses);
    if (showInStorybook) {
        onlyForStorybook.appendChild(section);
    }

    const graphic = createElement('div', ['graphic','variant-solid'], null, section);
    createElement('div', ['icon-box', icon], null, graphic);
    const container = createElement('div', ['textbox'], null, section);
    createElement('h3', [], headline, container);
    createElement('p', [], paragraph, container);
    container.appendChild(createButton({
        size: 'small',
        color: 'primary-light',
        label: 'Mehr dazu',
    }));

    if (showInStorybook) {
        return onlyForStorybook;
    } else {
        return section;
    }
}