type StepKey = "component" | "select" | "preview" | "execute";

const STEPS: { key: StepKey; label: string }[] = [
  { key: "component", label: "Component" },
  { key: "select", label: "Select" },
  { key: "preview", label: "Preview" },
  { key: "execute", label: "Execute" },
];

export default function BumpStepHeader({ step }: { step: StepKey }) {
  const stepIndex = STEPS.findIndex((s) => s.key === step);

  return (
    <div className="flex items-center">
      {STEPS.map((s, i) => {
        const isActive = i === stepIndex;
        const isComplete = i < stepIndex;
        return (
          <div key={s.key} className="flex items-center">
            {i > 0 && (
              <div
                className={`w-8 h-px ${isComplete ? "bg-accent" : "bg-surface-2"}`}
              />
            )}
            <div
              className={`flex items-center gap-2 px-3 py-1.5 rounded-full text-sm transition-colors duration-200 ${
                isActive
                  ? "bg-accent/15 text-accent font-medium"
                  : isComplete
                    ? "text-accent"
                    : "text-text-muted"
              }`}
            >
              <div
                className={`w-5 h-5 rounded-full flex items-center justify-center text-xs font-bold transition-colors duration-200 ${
                  isActive
                    ? "bg-accent text-white"
                    : isComplete
                      ? "bg-accent/20 text-accent"
                      : "bg-surface-2 text-text-muted"
                }`}
              >
                {isComplete ? (
                  <svg
                    className="w-3 h-3"
                    viewBox="0 0 12 12"
                    fill="currentColor"
                  >
                    <path
                      d="M10 3L4.5 8.5L2 6"
                      stroke="currentColor"
                      strokeWidth="2"
                      fill="none"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                  </svg>
                ) : (
                  i + 1
                )}
              </div>
              {s.label}
            </div>
          </div>
        );
      })}
    </div>
  );
}