import { executorLabel, nodeLabel, statusLabel, type StateMachineMeta, type TimelineNode } from '../stateMachine';

type Props = {
  meta: StateMachineMeta | null;
  timeline: TimelineNode[];
};

export function JobTimeline({ meta, timeline }: Props) {
  return (
    <div className="panel">
      <div className="panel-title">流程状态图</div>
      <div className="timeline">
        {timeline.map((node) => (
          <div key={node.node_code} className={`timeline-node status-${node.display_status.toLowerCase()}`}>
            <div className="timeline-node-name">{nodeLabel(meta, node.node_code)}</div>
            <div className="timeline-node-status">{statusLabel(meta, node.display_status)}</div>
            <div className="timeline-node-executor">{executorLabel(meta, node.executor_type || meta?.node_executor[node.node_code])}</div>
          </div>
        ))}
      </div>
    </div>
  );
}