import * as React from 'react'
import { Check } from 'lucide-react'

export interface StepConfig {
  label: string
  description?: string
}

export interface StepIndicatorProps {
  steps: StepConfig[]
  currentIndex: number
  className?: string
}

export function StepIndicator({ steps, currentIndex, className = '' }: StepIndicatorProps) {
  return (
    <ol className={`flex items-center gap-0 ${className}`}>
      {steps.map((step, index) => {
        const isCompleted = index < currentIndex
        const isActive = index === currentIndex
        const isLast = index === steps.length - 1

        return (
          <li key={index} className={`flex items-center ${!isLast ? 'flex-1' : ''}`}>
            <div className="flex flex-col items-center">
              <div
                className={[
                  'flex h-8 w-8 items-center justify-center rounded-full border-2 text-sm font-medium transition-colors',
                  isCompleted
                    ? 'border-primary bg-primary text-primary-foreground'
                    : isActive
                    ? 'border-primary bg-white text-primary'
                    : 'border-gray-300 bg-white text-gray-400',
                ].join(' ')}
              >
                {isCompleted ? <Check className="h-4 w-4" /> : index + 1}
              </div>
              <span
                className={[
                  'mt-1 text-xs font-medium',
                  isActive ? 'text-primary' : isCompleted ? 'text-gray-600' : 'text-gray-400',
                ].join(' ')}
              >
                {step.label}
              </span>
            </div>
            {!isLast && (
              <div
                className={[
                  'h-0.5 flex-1 mx-2 mb-4 transition-colors',
                  isCompleted ? 'bg-primary' : 'bg-gray-200',
                ].join(' ')}
              />
            )}
          </li>
        )
      })}
    </ol>
  )
}