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

function nodeText(it, i) {
  if (it.status === 'done') return '✓';
  if (it.status === 'error') return '✕';
  return String(i + 1);
}

export default function StepList({ steps = [], direction = 'vertical', clickable = false, onStepClick }) {
  return (
    <div className={'aa-steplist' + (direction === 'horizontal' ? ' is-horizontal' : '')}>
      {steps.map((it, i) => (
        <div
          key={i}
          className={`aa-steplist-item is-${it.status}${clickable ? ' is-clickable' : ''}`}
          onClick={clickable ? () => onStepClick && onStepClick(i) : undefined}
        >
          <span className="aa-steplist-node">{nodeText(it, i)}</span>
          <span className="aa-steplist-line" />
          <div className="aa-steplist-body">
            <div className="aa-steplist-title">{it.title}</div>
            {it.desc ? <div className="aa-steplist-desc">{it.desc}</div> : null}
          </div>
        </div>
      ))}
    </div>
  );
}