chatkit/frontend/src/components/StepIndicator.tsx

interface StepIndicatorProps {
  currentStep: 1 | 2 | 3;
  onStepClick?: (step: 1 | 2 | 3) => void;
}

const steps = [
  { num: 1 as const, label: "上傳資料", icon: "📁" },
  { num: 2 as const, label: "編輯提示詞", icon: "✏️" },
  { num: 3 as const, label: "檢視報告", icon: "📊" },
];

export function StepIndicator({ currentStep, onStepClick }: StepIndicatorProps) {
  return (
    <div className="flex items-center justify-center gap-2 py-6 px-4">
      {steps.map((step, idx) => (
        <div key={step.num} className="flex items-center">
          <button
            onClick={() => onStepClick?.(step.num)}
            disabled={step.num > currentStep}
            className={`flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-all ${
              step.num === currentStep
                ? "bg-[var(--color-primary)] text-white shadow-lg"
                : step.num < currentStep
                ? "bg-[var(--color-success)]/20 text-[var(--color-success)] cursor-pointer hover:bg-[var(--color-success)]/30"
                : "bg-[var(--color-border)]/30 text-[var(--color-text-muted)] cursor-not-allowed"
            }`}
          >
            <span>{step.num < currentStep ? "✓" : step.icon}</span>
            <span className="hidden sm:inline">{step.label}</span>
            <span className="sm:hidden">{step.num}</span>
          </button>
          {idx < steps.length - 1 && (
            <div className={`w-8 h-0.5 mx-1 ${
              step.num < currentStep ? "bg-[var(--color-success)]" : "bg-[var(--color-border)]"
            }`} />
          )}
        </div>
      ))}
    </div>
  );
}