"use client";

import { Check } from "lucide-react";
import { ONBOARDING_STEPS } from "@/types/onboarding";

interface OnboardingProgressProps {
  currentStep: number;
  className?: string;
}

export function OnboardingProgress({
  currentStep,
  className = "",
}: OnboardingProgressProps) {
  return (
    <div className={`w-full ${className}`}>
      <div className="flex items-center justify-between">
        {ONBOARDING_STEPS.map((step, index) => {
          const stepNumber = index + 1;
          const isCompleted = stepNumber < currentStep;
          const isCurrent = stepNumber === currentStep;
          const _isUpcoming = stepNumber > currentStep;

          return (
            <div key={step.id} className="flex flex-1 items-center">
              {/* 步骤圆圈 */}
              <div className="flex flex-col items-center">
                <div
                  className={`flex h-8 w-8 items-center justify-center rounded-full border-2 transition-all ${
                    isCompleted
                      ? "border-primary bg-primary text-primary-foreground"
                      : isCurrent
                        ? "border-primary bg-primary/10 text-primary ring-2 ring-primary/20"
                        : "border-muted-foreground/30 bg-muted/50 text-muted-foreground"
                  }`}
                >
                  {isCompleted ? (
                    <Check className="h-4 w-4" />
                  ) : (
                    <span className="text-sm font-medium">{stepNumber}</span>
                  )}
                </div>
                {/* 步骤标题 - 只在当前和已完成步骤显示 */}
                <span
                  className={`mt-2 text-xs font-medium whitespace-nowrap hidden sm:block ${
                    isCurrent
                      ? "text-primary"
                      : isCompleted
                        ? "text-foreground"
                        : "text-muted-foreground"
                  }`}
                >
                  {step.title}
                </span>
              </div>

              {/* 连接线 */}
              {index < ONBOARDING_STEPS.length - 1 && (
                <div className="mx-2 h-0.5 flex-1 bg-muted-foreground/20">
                  <div
                    className={`h-full transition-all ${
                      isCompleted ? "bg-primary" : "bg-transparent"
                    }`}
                    style={{ width: isCompleted ? "100%" : "0%" }}
                  />
                </div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}
