import './secondary-menu.scss';
import {createElement} from "../../_global/scripts/helpers";

export const createSecondaryMenu = ({
  secondaryLinks = ['Über uns', 'Presse', 'Newsletter'],
  languageLinks = ['CZ', 'EN'],
  iconLinks = [
    {
      iconClass: 'sign-language',
      label: 'Zeichensprache',
    },
    {
      iconClass: 'simple-language',
      label: 'Einfach Sprache',
    },
    {
      iconClass: 'login',
      label: 'Einloggen',
    }
  ]
}) => {
  const wrap = createElement('div', ['secondary-menu-wrapper']);

  const secondary = createElement('div', ['secondary-menu', 'variant-subtle-primary'], null, wrap);
  const secondaryUl = createElement('ul', [], null, secondary);
  secondaryLinks.map((link) => {
    const li = createElement('li', [], null, secondaryUl);
    const a = createElement('a', [], link, li);
    a.href = '#';
  })

  const meta = createElement('div', ['meta-menu', 'variant-base'], null, wrap);
  const metaUl = createElement('ul', [], null, meta);

  const contactLi = createElement('li', ['contact'], null, metaUl);
  const contactA = createElement('a', [], 'Kontakt', contactLi);
  contactA.href = '#';

  const languageLi = createElement('li', ['language'], null, metaUl);
  const languageUl = createElement('ul', [], null, languageLi);
  languageLinks.map((link) => {
    const li = createElement('li', [], null, languageUl);
    const a = createElement('a', [], link, li);
    a.href = '#';
  })

  const iconsLi = createElement('li', ['icons'], null, metaUl);
  const iconsUl = createElement('ul', [], null, iconsLi);
  iconLinks.map((link) => {
    const li = createElement('li', [link.iconClass], null, iconsUl);
    const a = createElement('a', [], link.label, li);
    a.href = '#';
  })

  return wrap;
}