import { Fragment } from "react";
import { Check } from "lucide-react";
import { cn } from "~/lib/utils";

export interface WizardStepperProps {
  currentStep: number;
  steps: string[];
  onStepClick: (n: number) => void;
}

export function WizardStepper({ currentStep, steps, onStepClick }: WizardStepperProps) {
  return (
    <div className="mb-6">
      <div className="flex items-center">
        {steps.map((label, i) => {
          const n = i + 1;
          const done = n < currentStep;
          const active = n === currentStep;
          return (
            <Fragment key={label}>
              {i > 0 && (
                <div className={cn("flex-1 h-0.5 transition-colors", done ? "bg-primary" : "bg-border")} />
              )}
              <button
                type="button"
                onClick={() => done && onStepClick(n)}
                className={cn(
                  "shrink-0 w-9 h-9 rounded-full border-2 flex items-center justify-center text-sm font-semibold bg-background transition-colors",
                  done && "bg-primary border-primary text-primary-foreground",
                  active && !done && "border-primary text-primary",
                  !done && !active && "border-border text-muted-foreground",
                  done ? "cursor-pointer" : "cursor-default"
                )}
              >
                {done ? <Check className="h-4 w-4" /> : n}
              </button>
            </Fragment>
          );
        })}
      </div>
      <div className="flex mt-1.5">
        {steps.map((label, i) => {
          const n = i + 1;
          const done = n < currentStep;
          const active = n === currentStep;
          return (
            <Fragment key={label}>
              {i > 0 && <div className="flex-1" />}
              <div className="shrink-0 w-9 flex justify-center">
                <span className={cn(
                  "text-xs hidden sm:block whitespace-nowrap",
                  active ? "text-primary font-medium" : done ? "text-foreground" : "text-muted-foreground"
                )}>
                  {label}
                </span>
              </div>
            </Fragment>
          );
        })}
      </div>
    </div>
  );
}