"use client"

import type React from "react"

import { cn } from "@/lib/utils"

interface Step {
  id: number
  title: string
  icon: React.ReactNode
}

interface StepIndicatorProps {
  currentStep: number
  steps: Step[]
}

export default function StepIndicator({ currentStep, steps }: StepIndicatorProps) {
  return (
    <div className="flex justify-between items-center w-full mb-6 px-4 relative">
      {/* 连接线 */}
      <div className="absolute top-8 left-0 right-0 h-0.5 bg-gray-200 -z-10"></div>
      
      {steps.map((step, index) => {
        const isCompleted = index < currentStep
        const isActive = index === currentStep
        
        return (
          <div key={step.id} className="flex flex-col items-center z-10">
            <div
              className={cn(
                "w-16 h-16 rounded-full flex items-center justify-center mb-2",
                isActive ? "bg-blue-500 text-white" : 
                isCompleted ? "bg-blue-500 text-white" : "bg-gray-200 text-gray-500",
              )}
            >
              {step.icon}
            </div>
            <span className={cn("text-sm", isActive ? "text-blue-500 font-medium" : isCompleted ? "text-blue-500" : "text-gray-500")}>
              {step.title}
            </span>
          </div>
        )
      })}
    </div>
  )
}