import React from 'react';
import { Tooltip } from 'antd';
import './index.less';

function Step(props) {
  const { list = [], step = 1, onClick, message, maxStep } = props;
  return (
    <div className="step">
      {list.map((item, index) => {
        const info = <div className={`item ${index === step - 1 ? 'active' : ''} ${maxStep && index >= maxStep ? 'trail' : ''}`} onClick={() => {
          if ((maxStep && index < maxStep) || !maxStep) if (onClick) onClick(index + 1);
        }}>
          <span className="text">{item}</span>
        </div>;
        if ((maxStep && index < maxStep) || !maxStep) {
          return info;
        }
        return <Tooltip title={message} trigger='click'>
          {info}
        </Tooltip>;
      })}
    </div>
  );
}
Step.propTypes = {};
export default Step;