import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Section from '../Section';

class Header extends Component {
  static propTypes = {
    children: PropTypes.any,
    left: PropTypes.any,
    right: PropTypes.any,
    className: PropTypes.string,
    theme: PropTypes.oneOf(['transparent', 'white']),
  };
  static defaultProps = {
    children: null,
    left: null,
    right: null,
    className: null,
    theme: 'transparent',
  };

  render() {
    const { left, right, children, className, theme } = this.props;

    let componentClassName = theme === 'transparent' ? 'Header Header--transparent' : 'Header';
    componentClassName += className ? ` ${className}` : '';

    return (
      <header className={componentClassName}>
        <Section theme={theme}>
          <nav className="Header-nav">
            <ul className="Header-left">
              {React.Children.map(left, child => <li className="Header-entry">{child}</li>)}
            </ul>
            <ul className="Header-right">
              {React.Children.map(right, child => <li className="Header-entry">{child}</li>)}
            </ul>
          </nav>
          {children}
        </Section>
      </header>
    );
  }
}

export default Header;