import React, { memo } from 'react';
import {
  StyleSheet,
  Text,
  View,
} from 'react-native';

import { useTheme } from '../../../theme';

interface TransferStepperProps {
  currentStep: number;
}

const STEPS = ['Type', 'Beneficiary', 'Amount', 'Confirm', 'Success'];

const TransferStepperComponent = ({ currentStep }: TransferStepperProps) => {
  const theme = useTheme();

  return (
    <View style={styles.row}>
      {STEPS.map((step, index) => {
        const isActive = index <= currentStep;
        return (
          <View key={step} style={styles.step}>
            <View
              style={[
                styles.dot,
                {
                  backgroundColor: isActive ? theme.colors.accent : theme.colors.cardBorder,
                },
              ]}
            />
            <Text style={[styles.label, { color: theme.colors.textSecondary }]}>{step}</Text>
          </View>
        );
      })}
    </View>
  );
};

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    gap: 8,
  },
  step: {
    alignItems: 'center',
    gap: 6,
    flex: 1,
  },
  dot: {
    width: 12,
    height: 12,
    borderRadius: 999,
  },
  label: {
    fontSize: 10,
    textAlign: 'center',
  },
});

export const TransferStepper = memo(TransferStepperComponent);