import type { FC } from 'react'
import type { Step } from './step'
import { Fragment } from 'react'
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>
  )
}