import { stageMeta, stageOrder } from "../routes/stage-config";

export function Progress({ status }: { status: string }) {
  const current = Math.max(stageOrder.indexOf(status as never), 0);
  return (
    <div className="prog">
      {stageOrder.map((stage, index) => <span key={stage} className={index < current ? "done" : index === current ? "cur" : ""} />)}
    </div>
  );
}

export function FragmentStageStep({ stage, done, active, lineDone, isLast, onClick }: {
  stage: string;
  done: boolean;
  active: boolean;
  lineDone: boolean;
  isLast: boolean;
  onClick: () => void;
}) {
  const meta = stageMeta[stage];
  return (
    <>
      <button className={`stage-step ${done ? "done" : ""} ${active ? "active" : ""}`} type="button" onClick={onClick}>
        <div className="num">{done ? "✓" : meta.no}</div><div className="lbl">{meta.label}</div><div className="st">{done ? "已确认" : active ? "进行中" : "未开始"}</div>
      </button>
      {!isLast && <div className={`stage-line ${lineDone ? "done" : ""}`} />}
    </>
  );
}
