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

export type Step = { id: string; label: string; state?: 'pending'|'verified'|'approved'|'allocated'|'completed' };

export const Timeline: React.FC<{steps: Step[]}> = ({ steps }) => {
  return (
    <div className="rp-timeline" role="list" aria-label="Lifecycle timeline">
      {steps.map((s, i) => (
        <React.Fragment key={s.id}>
          <div className={`rp-step rp-step--${s.state ?? 'pending'}`} role="listitem">
            <div className="rp-step__icon">{i+1}</div>
            <div className="rp-step__label">{s.label}</div>
          </div>
          {i < steps.length - 1 && <div className="rp-connector" aria-hidden></div>}
        </React.Fragment>
      ))}
    </div>
  );
};

export default Timeline;