import './social.scss';
import {createElement} from "../../_global/scripts/helpers";
import {createSocialIcons} from "../../atoms/social-icons/SocialIconsComponent";

export const createSocialSection = ({
  kicker = 'Aktuelles aus Social Media',
  headline = '#ihkmusterstadt',
  copy = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio magnam, fugiat maxime sapiente sit similique quis officia minus. Dolore, repellat.',
  visitUs = 'Besuchen Sie uns auf:',

}) => {
  const section = createElement('section', ['social'])
  const container = createElement('div', ['container'], null, section);
  const wrapper = createElement('div', ['social-wrapper'], null, container);

  const iconWrapper = createElement('div', ['social-profiles'], visitUs && visitUs.length > 0 ? '<p>' + visitUs + '</p>' : null, wrapper);
  const icons = createSocialIcons({title: visitUs});
  iconWrapper.appendChild(icons);

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

  const socialBox = createElement('div', ['social-box'], null, wrapper);
  socialBox.innerHTML = '<iframe src="./html/twitter.html" width="100%" height="100%" frameborder="0"></iframe>';

  return section;
}