import { Text, TextInput, View } from "react-native";
import { AppContext, AppStyles } from "../../utils";
import { useContext } from "react";

export default function MyTextInput({
  textTitle,
  textDescription,
  textMaxLength,
  value,
  onChangeText,
  inputMode,
  onSubmitEditing,
}) {
  const appContext = useContext(AppContext);

  return (
    <View style={{ paddingLeft: 10, paddingRight: 10 }}>
      <Text style={{ color: appContext.appTheme.textSecondary }}>
        {textTitle}
      </Text>
      <TextInput
        inputMode={inputMode === undefined ? "text" : inputMode}
        style={{
          height: 40,
          color: appContext.appTheme.text,
          borderBottomWidth: 1,
          borderColor: appContext.appTheme.textInputBottomColor,
        }}
        maxLength={textMaxLength}
        value={value}
        onChangeText={onChangeText}
        onSubmitEditing={onSubmitEditing}
      />
      <Text
        style={[
          AppStyles.typography14,
          { color: appContext.appTheme.textSecondary, marginTop: 6 },
        ]}
      >
        {textDescription}
      </Text>
    </View>
  );
}
