src/components/auth/form/StepIndicator.tsx

'use client';

interface StepIndicatorProps {
  currentStep: number;
  totalSteps: number;
}

export default function StepIndicator({ currentStep, totalSteps }: StepIndicatorProps) {
  return (
    <div
      style={{
        display: 'flex',
        justifyContent: 'center',
        gap: '8px',
        marginTop: '20px',
      }}
    >
      {Array.from({ length: totalSteps }, (_, i) => i + 1).map((step) => (
        <div
          key={step}
          style={{
            width: '10px',
            height: '10px',
            borderRadius: '50%',
            backgroundColor: step === currentStep ? '#2563eb' : '#d1d5db',
            transition: 'background-color 0.2s',
          }}
        />
      ))}
    </div>
  );
}