interface StepLoaderProps {
  currentStep: number;
  totalSteps: number;
  className?: string;
}
 
export function StepLoader({
  currentStep,
  totalSteps,
  className = "",
}: StepLoaderProps) {
  const steps = Array.from({ length: totalSteps }, (_, i) => i);
 
  return (
    <div className={`p-4 ${className}`}>
      <div className="relative">
        <div className="-translate-y-1/2 absolute top-1/2 left-0 h-0.5 w-full bg-white" />
        <div
          className="-translate-y-1/2 absolute top-1/2 left-0 h-0.5 bg-white-a4 transition-all duration-300"
          style={{ width: `${(currentStep / (totalSteps - 1)) * 100}%` }}
        />
        <div className="relative flex justify-between">
          {steps.map((index) => (
            <div
              key={index}
              className={`flex h-8 w-8 items-center justify-center rounded-full ${
                index <= currentStep
                  ? "bg-gray-800 text-white"
                  : "bg-gray-100 text-black-a11"
              }transition-colors duration-300`}
            >
              {index + 1}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}