/*
 * File: PinInput.tsx
 * Description: Component for PIN entry
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */

import React from 'react';
import { View, StyleSheet, TextInput as RNTextInput } from 'react-native';
import { Colors, Spacing, BorderRadius, Typography } from 'shared/src/theme';

interface PinInputProps {
  value: string;
  onChange: (val: string) => void;
  length?: number;
}

/**
 * PinInput - input for entering PIN code
 */
const PinInput: React.FC<PinInputProps> = ({ value, onChange, length = 4 }) => {
  return (
    <View style={styles.container}>
      {Array.from({ length }).map((_, idx) => (
        <RNTextInput
          key={idx}
          style={styles.input}
          value={value[idx] || ''}
          onChangeText={text => {
            const newValue = value.substring(0, idx) + text + value.substring(idx + 1);
            onChange(newValue);
          }}
          maxLength={1}
          keyboardType="number-pad"
          secureTextEntry
        />
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'center',
    marginVertical: Spacing.md,
  },
  input: {
    width: 40,
    height: 48,
    marginHorizontal: Spacing.xs,
    backgroundColor: Colors.backgroundAlt,
    borderRadius: BorderRadius.md,
    textAlign: 'center',
    fontFamily: Typography.fontFamily.bold,
    fontSize: Typography.fontSize.lg,
    color: Colors.textPrimary,
    borderWidth: 1,
    borderColor: Colors.border,
  },
});

export default PinInput;

/*
 * End of File: PinInput.tsx
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */