import React, { Component } from 'react';
import './index.scss';

class Banner extends Component {
  render() {
    const { toSection, navs, index } = this.props;
    return (
      <div id={'main-banner'}>
        <div className="banner"></div>
        <nav id={'main-nav'}>
          <ul>
            {
              navs.map((item, i) => {
                return (
                  <li key={i} className={index === i ? 'active' : ''}>
                    <a href={`#${item.id}`} onClick={(e) => toSection(i, e)}>{item.text}</a>
                  </li>
                )
              })
            }
          </ul>
        </nav>
      </div>
    )
  }
}

export default Banner
