import {KeyboardTypeOptions, Text, TextInput, View} from 'react-native';
import {MyIcon} from './MyIcon';

interface MyIconInputProps {
  text: string;
  iconName: string;
  keyboardType?: KeyboardTypeOptions;
  secureTextEntry?: boolean;
  value?: string;
  onChangeText?: (text: string) => void;
  disableContainer?: boolean;
}

export function MyIconInput({text, iconName, keyboardType, secureTextEntry, value, onChangeText, disableContainer}: MyIconInputProps) {
  return (
    <View
      style={[{
        flexDirection: 'row',
        alignItems: 'center',
      }, !disableContainer && { backgroundColor: '#26263f', borderRadius: 10}]}>
      <View style={{marginLeft: 12}}>
        <MyIcon name={iconName} size={32} />
      </View>

      <View style={{flex: 1, margin: 12, gap: 2}}>
        <Text>{text}</Text>
        <TextInput
          style={{
            backgroundColor: '#212137',
            height: 40,
            borderRadius: 10,
            paddingLeft: 10
          }}
          keyboardType={keyboardType}
          secureTextEntry={secureTextEntry}
          value={value}
          onChangeText={onChangeText}
        />
      </View>
    </View>
  );
}
