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

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

function Tabs(props) {
  const {
    className = '',
    tabs = [],
    size = 'basic',
    type = 'line',
    theme = 'default',
    border,
    space,
    onChange,
  } = props;
  return (
    <div className={`tabs ${className} ${type} ${theme} ${size} ${border ? 'border' : ''}`}>
      <div className="tabs-warpper" style={{ marginLeft: space * -1 || '', marginRight: space * -1 || '' }}>
        {tabs.map(item => {
          return item.path ? <Link to={item.path}>{getItem(props, item)}</Link> : getItem(props, item, onChange);
        })}
      </div>
    </div>
  );
}
Tabs.propTypes = {};
export default Tabs;