import { CheckCircle2, Loader2 } from "lucide-react";

const STEPS = [
  { id: 1, label: "Template" },
  { id: 2, label: "Recipient" },
  { id: 3, label: "Generate" },
  { id: 4, label: "Review" },
  { id: 5, label: "Sent" },
];

export default function StepIndicator({ currentStep, loading }) {
  return (
    <div className="flex items-center justify-center gap-1">
      {STEPS.map((step, i) => {
        const isActive = step.id === currentStep;
        const isDone = step.id < currentStep;
        const isLoading = isActive && loading;

        return (
          <div key={step.id} className="flex items-center">
            <div
              className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[10px] font-semibold tracking-wide transition-all duration-300 ${isDone
                ? "bg-emerald-500/10 text-emerald-700 dark:text-emerald-300 border border-emerald-500/20"
                : isActive
                  ? "bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 border border-indigo-500/20"
                  : "text-[var(--c-text-muted)] border border-transparent"
                }`}
            >
              {isDone ? (
                <CheckCircle2 size={10} className="text-emerald-600 dark:text-emerald-400" />
              ) : isLoading ? (
                <Loader2 size={10} className="animate-spin" />
              ) : (
                <span className={`w-3.5 h-3.5 flex items-center justify-center rounded-full text-[8px] font-bold ${isActive ? "bg-indigo-500 text-white" : "bg-gray-200 dark:bg-white/10 text-gray-500 dark:text-[#5a5a72]"
                  }`}>
                  {step.id}
                </span>
              )}
              {step.label}
            </div>
            {i < STEPS.length - 1 && (
              <div className={`w-5 h-px mx-0.5 transition-colors duration-300 ${isDone ? "bg-emerald-500/30" : "bg-gray-200 dark:bg-white/[0.06]"
                }`} />
            )}
          </div>
        );
      })}
    </div>
  );
}