import React, { FC, useState } from 'react';
import { TextInput, Text, View, InputModeOptions } from 'react-native';
import { styling } from './style';

type Props = {
  placeholder: string;
  onChange: (text: string) => void;
  header?: string;
  isPrivate?: boolean;
  inputMode?: InputModeOptions;
};

const Input: FC<Props> = ({ onChange, placeholder, header, isPrivate, inputMode }) => {
  const [focused, setFocused] = useState(false);

  const styles = styling(focused);

  return (
    <View>
      {header ? <Text style={styles.text}>{header}</Text> : null}
      <TextInput
        inputMode={inputMode ?? 'text'}
        secureTextEntry={isPrivate ?? false}
        placeholder={placeholder}
        onChangeText={onChange}
        onFocus={() => setFocused(true)}
        onBlur={() => setFocused(false)}
        style={styles.wrapper}
      />
    </View>
  );
};

export default Input;