import React from 'react';
import './index.less';

function Navigation(props) {
  const { list = [], active = 0, theme, onChange } = props;
  return (
    <div className={`navigation ${theme}`}>
      {list.map((item, index) => {
        return (
          <div className={`item ${index === active ? 'active' : ''}`} onClick={() => {
            if (onChange) onChange(index);
          }}>
            <span className="text">{item.title}</span>
          </div>
        );
      })}
    </div>
  );
}
Navigation.propTypes = {};
export default Navigation;