import { AntDesign } from "@expo/vector-icons";
import React from "react";
import { TextInput, TextInputProps, View } from "react-native";
import { AntDesignIconNames } from "../Icons";
import Text from "../ui/Text";
export interface FormInputProps extends TextInputProps {
  afterIcon?: AntDesignIconNames;
  label: string;
}
interface Props extends FormInputProps {
  beforeIcon: AntDesignIconNames;
}

export default React.forwardRef<any, Props>(
  (
    {
      onBlur,
      onChangeText,
      value,
      beforeIcon,
      afterIcon,
      label,
      placeholder,
      onPress,
      ...props
    },
    ref
  ): React.ReactElement => {
    return (
      <View className="gap-2">
        <Text weight="bold">{label}</Text>
        <View className="flex-row items-center gap-2 px-4 py-2 bg-gray-200 rounded-3xl">
          <AntDesign name={beforeIcon} size={24} />
          <TextInput
            className="grow"
            placeholder={placeholder}
            onBlur={onBlur}
            onChangeText={onChangeText}
            value={value}
            {...ref}
            {...props}
          />
          {afterIcon != null ? (
            <AntDesign name={afterIcon} size={24} onPress={onPress} />
          ) : null}
        </View>
      </View>
    );
  }
);