import { View, Text, TextInputProps } from 'react-native'
import React, {ComponentProps, forwardRef} from 'react'
import { Input, InputField } from '@gluestack-ui/themed';
import Colors from '../constants/Colors';
import { globalStyles } from '../constants/styles';
import { TextInput } from 'react-native-gesture-handler';

const WelcomeInput = React.forwardRef<TextInput, ComponentProps<typeof InputField>>((props, ref)=>{
  return (
    <Input borderWidth={0} size="xl" style={globalStyles.welcomeInput}>
      <InputField
        fontSize={25}
        // type="text"
        style={globalStyles.welcomeInput}
        maxLength={50}
        scrollEnabled={false}
        fontWeight="bold"
        color={Colors["dark"].redText}
        placeholderTextColor={Colors["dark"].redText}
        cursorColor={Colors["dark"].redText}
        ref={ref as any}
        {...props}
      />
    </Input>
  );
});

export default WelcomeInput;