import { Check } from "lucide-react";
import { faNum } from "../../lib/formatters";
import { cn } from "../../lib/utils";

export interface StepperProps {
  current: number;
  highestVisited: number;
  completedSteps: Set<number>;
  onGoto: (step: number) => void;
}

const STEPS = ["تأمین‌کننده", "اقلام", "شرایط پرداخت", "پروژه", "بازبینی و ثبت"];

// نوار ۵ مرحله‌ای ویزارد — کلیک روی مراحل بازدیدشده مجاز است
// مراحل تکمیل‌شده سبز، مرحله‌ی فعلی آبی
export function Stepper({ current, completedSteps, onGoto }: StepperProps) {
  return (
    <div className="mb-4 flex flex-wrap gap-2 rounded-xl border border-line bg-panel p-2 shadow-sm">
      {STEPS.map((label, i) => {
        const step = i + 1;
        const isCurrent = step === current;
        const isComplete = completedSteps.has(step);
        return (
          <button
            key={step}
            type="button"
            className={cn(
              "flex flex-1 cursor-pointer items-center justify-center gap-2 rounded-lg px-3 py-2 text-[12.5px] transition-colors",
              isCurrent
                ? "bg-[#2563eb] font-bold text-white"
                : isComplete
                  ? "bg-green-bg font-medium text-green"
                  : "hover:bg-slate-bg",
            )}
            onClick={() => onGoto(step)}
          >
            <span
              className={cn(
                "flex h-5 w-5 items-center justify-center rounded-full text-[11px] font-bold",
                isCurrent ? "bg-white/25" : isComplete ? "bg-green-bg text-green" : "bg-slate-bg text-muted",
              )}
            >
              {isComplete ? <Check className="h-3 w-3" /> : faNum(step)}
            </span>
            {label}
          </button>
        );
      })}
    </div>
  );
}