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

export default function TimelineList({ items = [], direction = 'vertical' }) {
  return (
    <div className={'aa-timeline' + (direction === 'horizontal' ? ' is-horizontal' : '')}>
      {items.map((it, i) => (
        <div className={`aa-timeline-item is-${it.status}`} key={i}>
          <span className="aa-timeline-node" />
          <span className="aa-timeline-line" />
          <div className="aa-timeline-content">
            <div className="aa-timeline-time">{it.time}</div>
            <div className="aa-timeline-title">{it.title}</div>
            {it.desc ? <div className="aa-timeline-desc">{it.desc}</div> : null}
          </div>
        </div>
      ))}
    </div>
  );
}