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

interface MyIconInputProps {
  text: string;
  iconName: string;
  keyboardType?: KeyboardTypeOptions;
  secureTextEntry?: boolean | undefined;
}

export function MyIconInput({text, iconName, keyboardType, secureTextEntry}: MyIconInputProps) {
  return (
    <View
      style={{
        backgroundColor: '#26263f',
        flexDirection: 'row',
        alignItems: 'center',
        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}
        />
      </View>
    </View>
  );
}
