//@ts-nocheck
import React from 'react';
import { StyleSheet, View } from 'react-native';
import { IconComplete, IconCurrentStep, IconNextStep } from '../assets/svgs';

export default function StepIndicator({ steps = 3, currentStep = 0 }) {
  return (
    <View
      style={{
        flexDirection: 'row',
        alignItems: 'center',
        paddingHorizontal: 16,
      }}
    >
      {Array.from({ length: steps }).map((_, index) => {
        const isCompleted = index < currentStep;
        const isActive = index === currentStep;

        return (
          <React.Fragment key={index}>
            {index > 0 && (
              <View
                style={[
                  styles.line,
                  {
                    backgroundColor:
                      index <= currentStep ? '#4CBA3D' : '#FBEFE7',
                  },
                ]}
              />
            )}

            <View style={[]}>
              {isCompleted ? (
                <IconComplete />
              ) : isActive ? (
                <IconCurrentStep />
              ) : (
                <IconNextStep />
              )}
            </View>
          </React.Fragment>
        );
      })}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 20,
  },
  line: {
    height: 2,
    flex: 1,
    backgroundColor: '#FBEFE7',
    marginHorizontal: 4,
  },
  circle: {
    width: 24,
    height: 24,
    borderRadius: 12,
    borderWidth: 2,
    borderColor: 'lightgreen',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  completedCircle: {
    backgroundColor: 'lightgreen',
    borderColor: 'lightgreen',
  },
  activeCircle: {
    borderColor: 'orange',
    backgroundColor: '#fff0e0',
  },
  innerDot: {
    width: 8,
    height: 8,
    borderRadius: 4,
    backgroundColor: 'orange',
  },
});
