import './logo-wall.scss';
import {createElement} from "../../_global/scripts/helpers";

export const createLogoWall = ({
   kicker = 'Dachzeile der Logo Wall',
   headline = 'Die Headline der Logo Wall',
   copy = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.',
   logos = [
     { src: './dummy/placeholder-3-2.svg', alt: 'Logo 1' },
     { src: './dummy/placeholder-3-2.svg', alt: 'Logo 2' },
     { src: './dummy/placeholder-3-2.svg', alt: 'Logo 3' },
     { src: './dummy/placeholder-3-2.svg', alt: 'Logo 4' },
     { src: './dummy/placeholder-3-2.svg', alt: 'Logo 5' },
     { src: './dummy/placeholder-3-2.svg', alt: 'Logo 6' },
     { src: './dummy/placeholder-3-2.svg', alt: 'Logo 7' },
     { src: './dummy/placeholder-3-2.svg', alt: 'Logo 8' },
   ]
 }) => {
  const wrapper = createElement('div', ['logo-wall']);

  if (kicker.length > 0 || headline.length > 0 || copy.length > 0) {
    const textWrapper = createElement('div', ['text-wrapper'], null, wrapper);
    const textBox = createElement('div', ['text-box'], null, textWrapper);
    if (kicker && kicker.length > 0) {
      createElement('span', ['kicker'], kicker, textBox);
    }
    if (headline && headline.length > 0) {
      createElement('h2', ['like-h2'], headline, textBox);
    }
    if (copy && copy.length > 0) {
      createElement('p', [], copy, textBox);
    }
  }

  // Logo-Grid erstellen
  const logoGrid = createElement('div', ['logo-grid'], null, wrapper);

  // Logos hinzufügen
  if (logos && logos.length > 0) {
    logos.forEach(logo => {
      const logoWrapper = createElement('div', ['logo-item'], null, logoGrid);
      const logoImg = createElement('img', [], null, logoWrapper);
      logoImg.src = logo.src;
      logoImg.alt = logo.alt;
    });
  }

  return wrapper;
}