import { type FC, Fragment } from 'react'
import type { Step } from './step'
import { StepperStep } from './step'

export type StepperProps = {
  steps: Step[]
  activeIndex: number
}

export const Stepper: FC<StepperProps> = (props) => {
  const { steps, activeIndex } = props
  return <div className='flex items-center gap-3'>
    {steps.map((step, index) => {
      const isLast = index === steps.length - 1
      return (
        <Fragment key={index}>
          <StepperStep
            {...step}
            activeIndex={activeIndex}
            index={index}
          />
          {!isLast && <div className='h-px w-4 bg-divider-deep' />}
        </Fragment>
      )
    })}
  </div>
}