import './header-search.scss';
import {createElement} from "../../_global/scripts/helpers";
import {createSearchInput} from "../../atoms/search-input/SearchInputComponent";
import {createSearchButton} from "../../atoms/search-button/SearchButtonComponent";
import {createSecondaryMenu} from "../../atoms/secondary-menu/SecondaryMenuComponent";

export const createHeaderSearch = ({

}) => {
  const form = createElement('form', ['header-search']);
  form.action = '#';
  const container = createElement('div', ['container', 'small'], null, form);
  const outer = createElement('div', ['outer'], null, container);
  const label = createElement('label', ['visually-hidden'], 'Suchbegriff', outer);
  label.for = 'header-search';
  const field = createSearchInput({
    typeahead: false,
    placeholder: 'Hier Ihr Thema finden',
    id: 'header-search',
  });
  const button = createSearchButton({});

  outer.appendChild(field);
  outer.appendChild(button);

  const nav = createElement('div', ['form-nav'], null, form);
  nav.appendChild(createSecondaryMenu({}));

  return form;
}