const FunctionTabsTop = props => {
  return (
    <div className='container'>
      <div className='row justify-content-center'>
        <ul className='FunctionTabs__nav'>
          {props.tabNames.map((tabName, index) => {
            return (
              <li key={index} className='FunctionTabs__nav-item'>
                <a
                  className={`FunctionTabs__nav-link ${
                    props.slideIndex === index
                      ? 'FunctionTabs__nav-link-active'
                      : ''
                  }`}
                  onClick={() => props.setSlideIndex(index)}
                >
                  {tabName}
                </a>
              </li>
            )
          })}
        </ul>
      </div>
    </div>
  )
}

export default FunctionTabsTop