import React from 'react';
import { View, Text } from '@tarojs/components';
import './index.scss';

interface Step {
  label: string;
}

interface StepIndicatorProps {
  steps: Step[];
  current: number;
  onChange?: (index: number) => void;
}

export default React.memo(function StepIndicator({ steps, current, onChange }: StepIndicatorProps) {
  return (
    <View className='step-indicator'>
      {steps.map((step, idx) => {
        const isCurrent = idx === current;
        const isDone = idx < current;
        const isClickable = isDone && !!onChange;

        return (
          <View className='step-item' key={step.label}>
            {idx > 0 && (
              <View className={`step-line ${isDone ? 'step-line-done' : ''}`} />
            )}
            <View
              className={`step-dot ${isCurrent ? 'step-current' : ''} ${isDone ? 'step-done' : ''}`}
              onClick={isClickable ? () => onChange(idx) : undefined}
            >
              {isDone ? <Text className='step-check'>&#10003;</Text> : <Text className='step-num'>{idx + 1}</Text>}
            </View>
            <Text className={`step-label ${isCurrent ? 'step-current' : ''} ${isDone ? 'step-done' : ''}`}>
              {step.label}
            </Text>
          </View>
        );
      })}
    </View>
  );
});