
import { Check } from "lucide-react"

interface Step {
  number: number
  label: string
  status: "active" | "inactive" | "completed"
}

interface StepperProps {
  steps: Step[]
}

export function Stepper({ steps }: StepperProps) {
  return (
    <div className="flex md:flex-row flex-col items-center gap-3 rounded-full px-4 py-2">
      {steps.map((step, index) => (
        <div key={step.number} className="flex items-center gap-3 ">
          {/* Step Badge and Label */}
          <div className="flex items-center gap-2 bg-[#E6ECFB] rounded-full px-3 py-2">
            {/* Numbered Badge */}
            <div
              className={`flex items-center justify-center w-6 h-6 rounded-full text-md font-semibold ${
                step.status === "completed" || step.status === "active" ? "bg-[#4C60E5] text-white" : "bg-gray-300 text-gray-600"
              }`}
            >
              {step.number}
            </div>

            {/* Step Label */}
            <span
              className={`text-sm font-medium whitespace-nowrap ${
                step.status === "active" || step.status === "completed" ? "text-gray-900" : "text-gray-500"
              }`}
            >
              {step.label}
            </span>
          </div>

          {/* Separator - Three Dots or Checkmark */}
          {index < steps.length - 1 && (
            <div className="flex items-center gap-1">
              <div className={`w-1 h-1 rounded-full ${step.status === "completed" ? "bg-[#4C60E5]" : "bg-gray-400"}`} />
              <div className={`w-1 h-1 rounded-full ${step.status === "completed" ? "bg-[#4C60E5]" : "bg-gray-400"}`} />
              <div className={`w-1 h-1 rounded-full ${step.status === "completed" ? "bg-[#4C60E5]" : "bg-gray-400"}`} />
            </div>
          )}

          {/* Checkmark Icon for Last Step */}
          {index === steps.length - 1  && (
            <div className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-300">
              <Check className="w-4 h-4 text-white" />
            </div>
          )}
        </div>
      ))}
    </div>
  )
}
