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

const Input = ({ label, value, onChangeText, placeholder, secureTextEntry }) => {
    const { inputStyle, labelStyle, containerStyle } = styles;
    return (
        <View style = {containerStyle} >
            <Text style = { labelStyle }>{ label }</Text>
            <TextInput
                secureTextEntry = {secureTextEntry}
                placeholder = {placeholder}
                autoCorrect = {false}
                style = { inputStyle }
                value = {value}
                onChangeText = {onChangeText}
            />
        </View>
    );
};

const styles = {
    inputStyle:{
        color: '#111',
        paddingRight: 5,
        paddingLeft: 5,
        fontSize: 18,
        lineHeight: 24,
        flex: 2,
        height: 40,
        width: 100
    },
    labelStyle: {
        fontSize: 18,
        paddingLeft: 20,
        flex: 1
    },
    containerStyle:{
        height: 40,
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center'
    }
};

export { Input };