import React, { Component } from 'react';
import './Header.css';
import me_white from './images/me-white.svg';

class Header extends Component {
  renderSectionLink(section, i) {
    //return (<li><a href={anchor}>{section.title}</a></li>);
  }

  render() {
    return (
      <header id="header">
        <div id="logo">
          <img src={me_white} alt=""></img>
          <div className="logotitle">
            <a href=""> Georg Hopp </a>
            <span>aka Steffers</span>
          </div>
        </div>
        <nav id="nav">
          <ul>
            { this.props.sections.map((section, i) => {
                let active = this.props.active === i ? ['active'] : [];
                return (
                  <li key={i.toString()}><a
                    className={active}
                    onClick={this.props.onClick(i+1)}>
                    {section.title}</a>
                  </li>);
              })
            }
          </ul>
        </nav>
      </header>
      );
  }
}

export default Header;
// vim: set ts=2 sw=2 et: