import {FC, useCallback} from "react";
import {StyleSheet, Text, TextInput, TouchableOpacity, View} from "react-native";
import {RFPercentage} from "react-native-responsive-fontsize";
import {responsiveWidth} from "react-native-responsive-dimensions";

type Props = {
    placeholder?: string;
    onChange?: (text: string) => void,
    secureTextEntry?: boolean
    value?: string
}

const InputField: FC<Props> = ({placeholder, onChange, value, secureTextEntry = false}) => {
    return (
        <View style={styles.fieldContainer}>
            <View style={styles.textInputWrapper}>
                <TextInput
                    value={value}
                    placeholder={placeholder}
                    autoCorrect={false}
                    autoCapitalize={"none"}
                    secureTextEntry={secureTextEntry}
                    style={styles.textInput}
                    onChangeText={onChange}
                />
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    textInputWrapper: {
        backgroundColor: '#0090c9',
        borderRadius: RFPercentage(1),
        flexDirection: 'row',
        paddingHorizontal: responsiveWidth(3),
    },
    fieldLabel: {
        marginLeft: 40,
        alignSelf: 'flex-start',
        fontSize: RFPercentage(3),
        marginBottom: 10,
    },
    fieldContainer: {
        justifyContent: 'center',
        alignItems: 'center',
    },
    textInput: {
        flex: 1,
        fontSize: RFPercentage(3),
        color: 'white',
    },
});

export default InputField;