import React from 'react';
import { View, Text } from 'react-native';
import { StepProgressProps } from './stepProgress.props';
import { getStyles } from './stepProgress.styles';
import { useAppTheme } from '@theme';

export const StepProgress: React.FC<StepProgressProps> = ({ steps, activeStep }) => {
  const { colors } = useAppTheme();
  const styles = getStyles(colors);

  return (
    <View style={styles.container}>
      {steps.map((step, index) => (
        <React.Fragment key={step.key}>
          <View style={styles.stepContainer}>
            <View
              style={[
                styles.circle,
                index <= activeStep && styles.circleActive,
              ]}
            >
              <Text style={styles.circleText}>{index + 1}</Text>
            </View>
            <Text
              style={[
                styles.label,
                index <= activeStep && styles.labelActive,
              ]}
            >
              {step.label}
            </Text>
          </View>
          {index < steps.length - 1 && (
            <View
              style={[
                styles.connector,
                index < activeStep && styles.connectorActive,
              ]}
            />
          )}
        </React.Fragment>
      ))}
    </View>
  );
};