import React from "react";
import { View, Text, StyleSheet } from "react-native";
import { useColors } from "@/hooks/useColors";

interface StepIndicatorProps {
  currentStep: number;
  totalSteps: number;
  labels: string[];
}

export function StepIndicator({ currentStep, totalSteps, labels }: StepIndicatorProps) {
  const colors = useColors();

  return (
    <View style={styles.container}>
      {Array.from({ length: totalSteps }, (_, i) => {
        const stepNum = i + 1;
        const isCompleted = stepNum < currentStep;
        const isActive = stepNum === currentStep;

        return (
          <React.Fragment key={stepNum}>
            <View style={styles.stepWrapper}>
              <View
                style={[
                  styles.circle,
                  {
                    backgroundColor: isCompleted || isActive ? colors.primary : colors.muted,
                    borderColor: isCompleted || isActive ? colors.primary : colors.border,
                  },
                ]}
              >
                {isCompleted ? (
                  <Text style={[styles.checkmark, { color: colors.primaryForeground }]}>✓</Text>
                ) : (
                  <Text
                    style={[
                      styles.stepNumber,
                      {
                        color: isActive ? colors.primaryForeground : colors.mutedForeground,
                      },
                    ]}
                  >
                    {stepNum}
                  </Text>
                )}
              </View>
              <Text
                style={[
                  styles.label,
                  {
                    color: isActive ? colors.primary : isCompleted ? colors.text : colors.mutedForeground,
                    fontWeight: isActive ? "600" : "400",
                  },
                ]}
              >
                {labels[i]}
              </Text>
            </View>
            {stepNum < totalSteps && (
              <View
                style={[
                  styles.connector,
                  {
                    backgroundColor: isCompleted ? colors.primary : colors.border,
                  },
                ]}
              />
            )}
          </React.Fragment>
        );
      })}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    alignItems: "flex-start",
    justifyContent: "center",
    paddingHorizontal: 8,
  },
  stepWrapper: {
    alignItems: "center",
    width: 68,
  },
  circle: {
    width: 32,
    height: 32,
    borderRadius: 16,
    borderWidth: 2,
    alignItems: "center",
    justifyContent: "center",
    marginBottom: 4,
  },
  stepNumber: {
    fontSize: 13,
    fontFamily: "Inter_600SemiBold",
  },
  checkmark: {
    fontSize: 14,
    fontFamily: "Inter_700Bold",
  },
  label: {
    fontSize: 10,
    textAlign: "center",
    fontFamily: "Inter_400Regular",
    lineHeight: 13,
  },
  connector: {
    flex: 1,
    height: 2,
    marginTop: 15,
    marginHorizontal: -4,
  },
});