Header

import React from 'react';
import classNames from 'classnames';
import { SvgIcon, Search, SearchInput } from 'seduo-ui';

const Header = ({ underLined, isLogged }) => (
    <header
        className={classNames('header', {
            'header--underlined': underLined,
        })}
    >
        <div className="header__container">
            <nav className="header__nav">
                <div className="header__block-left">
                    <a className="header__logo" href="#" title="Seduo.cz">
                        <SvgIcon kind="Logo" height={26} width={101} />
                    </a>
                    <div className="header__categories-wrapper">
                        <div className="dropdown dropdown--header">
                            <button id="headerMenu" className="btn header__button" type="button" data-offset="-15,15">
                                <SvgIcon kind="Categories" className="header__icon" />
                                <span className="mx-5">Kategorie kurzů</span>
                            </button>
                        </div>
                    </div>
                    <div className="header__search-wrapper">
                        <Search>
                            <SearchInput
                                onChange={() => undefined}
                                onToggle={() => undefined}
                                onKeyDown={() => undefined}
                                placeholder="Název kurzu lekce nebo jméno lektora"
                            />
                        </Search>
                    </div>
                </div>
                <ul className="header__navigation">
                    {isLogged ? (
                        <li className="header__navigation-item">
                            <a className="header__button btn" href="#" title="kurzy">
                                <SvgIcon kind="Box" className="header__icon" />
                                <span className="d-none d-lg-inline">
                                    <span className="header__button-text">Moje kurzy</span>
                                </span>
                                <span className="header__button-text header__button-text--course-count">(95)</span>
                                <span className="header__button-notification">
                                    <span className="notification notification--danger"></span>
                                </span>
                            </a>
                        </li>
                    ) : (
                        <li className="header__navigation-item header__navigation-item--visible-md">
                            <a className="header__navigation-link" href="#">
                                <SvgIcon kind="Building" className="header__icon" />
                                <span className="mx-5 text-nowrap d-lg-inline-flex d-none">Pro firmy</span>
                            </a>
                        </li>
                    )}
                    <li className="header__navigation-item header__navigation-item--hidden-md">
                        <button className="header__button btn" type="button">
                            <SvgIcon kind="Search" className="header__icon" />
                        </button>
                    </li>
                    <li className="header__navigation-item header__navigation-item--visible-md">
                        <button
                            className="header__button btn header__navigation-button"
                            type="button"
                            data-offset="12,18"
                        >
                            <SvgIcon kind="User" className="header__icon" />
                            {!isLogged && (
                                <span className="mx-5 text-nowrap d-lg-inline-flex d-none">
                                    Přihlášení a registrace
                                </span>
                            )}
                        </button>
                    </li>
                    <li className="header__navigation-item header__navigation-item--hidden-md">
                        <button className="header__navigation-button header__button btn" type="button">
                            <div className="icon-menu">
                                <span className="icon-menu__line" />
                                <span className="icon-menu__line" />
                                <span className="icon-menu__line" />
                            </div>
                        </button>
                    </li>
                </ul>
            </nav>
        </div>
    </header>
);

const Example = () => (
    <div>
        <Header underLined={true} isLogged={false} />
        <Header underLined={false} isLogged={true} />
    </div>
);

export default Example;