import * as React from "react"
import { ChevronLeft, ChevronRight } from "lucide-react"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"

interface Step {
  id: string
  title: string
  description: 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-blue-500 text-white border-blue-500"
                  : "bg-gray-200 text-gray-500 border-gray-200 dark:bg-gray-700 dark:text-gray-400 dark:border-gray-700"
              )}
            >
              {index + 1}
            </div>
            <div className="mt-2 text-xs font-medium text-center">
              <p className={cn(index === currentStep ? "text-blue-600" : "text-gray-500")}>
                {step.title}
              </p>
              <p className="text-xs text-gray-400">{step.description}</p>
            </div>
            {index < steps.length - 1 && (
              <div className="flex-1 h-px bg-gray-200 dark:bg-gray-700 mx-2">
                <div
                  className={cn(
                    "h-full transition-all duration-300",
                    index < currentStep ? "bg-blue-500" : "bg-transparent"
                  )}
                  style={{ width: index < currentStep ? '100%' : '0%' }}
                />
              </div>
            )}
          </div>
        ))}
      </div>
    )
  }
)
Steps.displayName = "Steps"

export { Steps }