import * as React from "react"

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

interface Step {
  id: string
  title: string
  description: string
  details?: string
}

interface StepsProps {
  steps: Step[]
  currentStep: number
  className?: string
}

const Steps = React.forwardRef<HTMLDivElement, StepsProps>(
  ({ steps, currentStep, className }, ref) => {
    return (
      <div ref={ref} className={cn("flex items-center justify-between w-full mb-6", className)}>
        {steps.map((step, index) => (
          <div key={step.id} className="flex-1 flex flex-col items-center">
            <div
              className={cn(
                "w-10 h-10 rounded-full flex items-center justify-center text-sm font-medium border-2 transition-colors",
                index <= currentStep
                  ? "bg-primary text-primary-foreground border-primary shadow-sm"
                  : "bg-muted text-muted-foreground border-muted"
              )}
            >
              {index + 1}
            </div>
            <div className="mt-2 text-xs font-medium text-center">
              <p className={cn(
                "font-semibold",
                index === currentStep ? "text-primary" : "text-muted-foreground"
              )}>
                {step.title}
              </p>
              <p className="text-xs text-muted-foreground mt-1">{step.description}</p>
              {step.details && index === currentStep && (
                <p className="text-xs text-primary mt-1 font-medium">
                  {step.details}
                </p>
              )}
            </div>
            {index < steps.length - 1 && (
              <div className="flex-1 h-px bg-border mx-2">
                <div
                  className={cn(
                    "h-full transition-all duration-300",
                    index < currentStep ? "bg-primary" : "bg-transparent"
                  )}
                  style={{ width: index < currentStep ? '100%' : '0%' }}
                />
              </div>
            )}
          </div>
        ))}
      </div>
    )
  }
)
Steps.displayName = "Steps"

export { Steps }
