import Styles from "@/constants/Styles";
import { Feather } from "@expo/vector-icons";
import { Pressable, View } from "react-native";
import Text from "./Text";


type Props = {
   label?: string;
   placeholder?: string;
   value: string;
   onPress?: () => void;
   info?: string;
   itemLeft?: React.ReactNode;
   error?: boolean;
   errorText?: string;
   required?: boolean;
   round?: boolean
   bg?: 'white' | 'transparent'
};

export default function SelectForm({ label, value, placeholder, onPress, info, error, errorText, required, itemLeft, round, bg }: Props) {
   return (
      <View style={[Styles.mb10]}>
         {
            label != undefined && (
               <Text style={[Styles.mb05, { textTransform: "capitalize" }, error && Styles.cError]}>
                  {label}
                  {required && (<Text style={Styles.cError}>*</Text>)}
               </Text>
            )
         }
         <Pressable onPress={onPress}>
            <View style={[Styles.inputRoundForm, Styles.inputRoundFormRight, error && { borderColor: "red" }, round && Styles.round30, Styles.pv10, { backgroundColor: bg && bg == 'white' ? 'white' : 'transparent' }]}>
               <Feather name="chevron-right" size={20} color="grey" />
               {
                  value ? (
                     <Text numberOfLines={1} ellipsizeMode='tail' style={[Styles.cBlack, Styles.w90]}>{value}</Text>
                  ) : (
                     <Text numberOfLines={1} ellipsizeMode='tail' style={[Styles.cGray, Styles.w90]}>{placeholder}</Text>
                  )
               }
            </View>
         </Pressable>
         {error && (<Text style={[Styles.textInformation, Styles.mt05, Styles.cError]}>{errorText}</Text>)}
         {info != undefined && (<Text style={[Styles.textInformation, Styles.mt05, Styles.cGray]}>{info}</Text>)}
      </View>
   )
}