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

interface OtpInputProps {
  length?: number;
  value: string;
  error?: boolean;
}

export const OtpInput: React.FC<OtpInputProps> = ({ length = 6, value, error }) => {
  const { colors } = useAppTheme();
  const styles = getStyles(colors);

  const boxes = Array(length).fill(0);

  return (
    <View style={styles.container}>
      {boxes.map((_, index) => {
        const char = value[index] || '';
        const isFocused = index === value.length;

        return (
          <View
            key={index}
            style={[
              styles.inputContainer,
              isFocused && styles.inputActive,
              error && styles.inputError,
            ]}
          >
            <Text style={styles.inputText}>{char}</Text>
          </View>
        );
      })}
    </View>
  );
};
export default OtpInput;