import React from 'react';
import './Steps.css';

/**
 * Kole UI Steps（React）
 * 对齐 组件2/7 StepList 规范：序号、标题、描述、状态、连接线、横/纵
 *
 * props:
 *  - steps    : [{ title, desc? }]
 *  - current  : 当前步骤索引
 *  - errorAt  : 异常步骤索引（-1 表示无）
 *  - direction: 'horizontal' | 'vertical'
 */
export default function Steps({ steps = [], current = 0, errorAt = -1, direction = 'horizontal' }) {
  const statusOf = (i) => {
    if (i === errorAt) return 'error';
    if (i < current) return 'finish';
    if (i === current) return 'process';
    return 'wait';
  };
  const icon = (s) => (s === 'finish' ? '✓' : s === 'error' ? '!' : null);

  return (
    <div className={`kole-steps ${direction}`}>
      {steps.map((s, i) => {
        const st = statusOf(i);
        return (
          <div key={i} className={`kole-step is-${st}`}>
            <div className="kole-step-icon">{icon(st) !== null ? icon(st) : i + 1}</div>
            <div className="kole-step-body">
              <div className="kole-step-title">{s.title}</div>
              {s.desc && <div className="kole-step-desc">{s.desc}</div>}
            </div>
          </div>
        );
      })}
    </div>
  );
}

/*
用法示例：
import Steps from './Steps';
const steps = [{ title: '填写订单' }, { title: '审核' }, { title: '付款' }];
<Steps steps={steps} current={1} direction="horizontal" />
*/