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

/* 步骤条（移动端）— 规格 §15
   纯展示：步骤本身不可点（规格 §15.5 明确如此，不是缺失）；
   状态不只靠颜色 —— 进行中加粗、已完成用勾选字符、失败用感叹号。 */
export default function Steps({
  direction = 'horizontal',
  steps = [],
  children = null,
}) {
  const cls =
    'kole-m-steps' + (direction === 'vertical' ? ' kole-m-steps--vertical' : '');

  const statusOf = (s) => (s && s.status) || 'wait';
  /* aria-current="step" 标出当前步（进行中与失败都算「停在这一步」） */
  const isCurrent = (s) => {
    const st = statusOf(s);
    return st === 'process' || st === 'error';
  };
  const dotOf = (s, i) => {
    const st = statusOf(s);
    if (st === 'finish') return '✓';
    if (st === 'error') return '!';
    return i + 1;
  };

  return (
    <ol className={cls}>
      {steps.map((s, i) => (
        <li
          key={i}
          className={`kole-m-steps__item kole-m-steps__item--${statusOf(s)}`}
          role="listitem"
          aria-current={isCurrent(s) ? 'step' : undefined}
        >
          <span className="kole-m-steps__dot" aria-hidden="true">
            {dotOf(s, i)}
          </span>
          {direction === 'vertical' ? (
            <span className="kole-m-steps__content">
              <span className="kole-m-steps__label">{s && s.label}</span>
            </span>
          ) : (
            <span className="kole-m-steps__label">{s && s.label}</span>
          )}
        </li>
      ))}
      {children}
    </ol>
  );
}