import React from 'react';
import { View, TextInput, Text } from 'react-native';
import { InputFieldProps } from './inputField.props';
import { styles } from './inputField.styles';

export function InputField({
  label,
  containerStyle,
  renderRightAccessory,
  style,
  placeholderTextColor = '#a0abcc',
  ...rest
}: InputFieldProps) {
  return (
    <View style={[styles.container, containerStyle]}>
      {label && <Text style={styles.label}>{label}</Text>}
      <View style={styles.inputWrapper}>
        <TextInput
          style={[styles.input, style]}
          placeholderTextColor={placeholderTextColor}
          {...rest}
        />
        {renderRightAccessory && (
          <View style={styles.rightAccessory}>
            {renderRightAccessory()}
          </View>
        )}
      </View>
    </View>
  );
}