import React, { ReactElement } from 'react';
import TopBarCss from './top-bar.module.css';
import LogoImg from './event_emitter_eltex_loc-32px.png';

export type TopBarProps = {
  contact: string;
  children?: any;
};

const TopBar = (props: TopBarProps): ReactElement => {
  return (
    <div className={TopBarCss.top}>
      <div className={TopBarCss.containerTitle}>
        <div className={TopBarCss.logo}>
          <a href="/" className={TopBarCss.logo}>
            <img
              src={LogoImg}
              alt="event_emitter_eltex_loc"
              className={TopBarCss.eventEmitterEltexLoc}
            />
            <span>redmine-issue-event-emitter</span>
          </a>
        </div>

        {props.children}

        <p>
          <a href="/" target="_blank">
            {' '}
            #документация
          </a>
        </p>
        <p>
          <a href={props.contact} target="_blank" rel="noreferrer">
            {' '}
            #контакты
          </a>
        </p>
        <p>
          <a href="https://gnedov.info/" target="_blank" rel="noreferrer">
            {' '}
            #блог
          </a>
        </p>
      </div>
    </div>
  );
};

export default TopBar;