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

type StepperProps = {
  steps: string[];
  currentStep: number;
};

export function Stepper({ steps, currentStep }: StepperProps) {
  return (
    <ol className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
      {steps.map((step, index) => {
        const stepNumber = index + 1;
        const isComplete = stepNumber < currentStep;
        const isCurrent = stepNumber === currentStep;

        return (
          <li key={step} className="flex items-center gap-2 rounded-lg border border-[#e4eaf4] bg-white px-3 py-2">
            <span
              className={cn(
                "flex h-6 w-6 items-center justify-center rounded-full text-xs font-bold",
                isComplete && "bg-[#2ca56f] text-white",
                isCurrent && "bg-[#0f2a5f] text-white",
                !isComplete && !isCurrent && "bg-[#edf1f9] text-[#63708a]",
              )}
              aria-hidden
            >
              {stepNumber}
            </span>
            <span className={cn("text-sm font-medium", isCurrent ? "text-[#0f2a5f]" : "text-[#5e6a82]")}>{step}</span>
          </li>
        );
      })}
    </ol>
  );
}
