import { ProgressBarStep, type Step } from './ProgressBarStep'

export type Status = 'PENDING' | 'ACTIVE' | 'IN_PROGRESS' | 'DONE' | 'ERROR'

export const ProgressBar = ({ steps }: { steps: Step[] }) => {
  return (
    <div className="-my-3 flex flex-col">
      {steps.map((step, index) => (
        <ProgressBarStep
          key={`${step.label}-${index}`}
          index={index}
          lastStepIndex={steps.length - 1}
          {...step}
        />
      ))}
    </div>
  )
}