import { cn } from "@/lib/utils";
import { useEffect, useState } from "react";

interface ProgressIndicatorProps {
  currentStep: number;
  totalSteps?: number;
  className?: string;
}

export default function ProgressIndicator({ 
  currentStep, 
  totalSteps = 4,
  className 
}: ProgressIndicatorProps) {
  const [prevStep, setPrevStep] = useState(currentStep);
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    // 组件挂载后启动动画
    setMounted(true);
  }, []);

  useEffect(() => {
    setPrevStep(currentStep);
  }, [currentStep]);

  return (
    <div
      className={cn(
        "box-border flex flex-row gap-1 items-center justify-start w-full",
        className
      )}
    >
      {Array.from({ length: totalSteps }).map((_, index) => {
        const isNewlyActive = index === currentStep - 1;
        const wasActive = index < prevStep;
        
        return (
          <div
            key={index}
            className="relative h-1 grow rounded-[999px] bg-surface-element-normal"
          >
            {index < currentStep && (
              <div
                className={cn(
                  "absolute inset-0 bg-surface-white-normal rounded-full",
                  isNewlyActive && mounted && "transition-[width,opacity] duration-500 ease-out",
                  (isNewlyActive && !mounted) ? "w-0 opacity-0" : "w-full opacity-100",
                  wasActive && "w-full opacity-100"
                )}
              />
            )}
          </div>
        );
      })}
    </div>
  );
}
