import React from 'react';
import { Link } from 'react-router-dom';
import './index.less';

function getItem(props, item, onChange) {
  const { width, space, active } = props;
  return (
    <div
      onClick={() => active !== item.key && onChange && onChange(item.key)}
      style={{ width: width || '', marginLeft: space || '', marginRight: space || '' }}
      className={`tab ${active === item.key ? 'active' : ''}`}
    >
      {item.name}
    </div>
  );
}

function Tabs(props) {
  const { tabs = [], type = 'line', border, onChange } = props;
  return (
    <div className={`tabs ${type} ${border ? 'border' : ''}`}>
      {tabs.map(item => {
        return item.path ? <Link to={item.path}>{getItem(props, item)}</Link> : getItem(props, item, onChange);
      })}
    </div>
  );
}
Tabs.propTypes = {};
export default Tabs;