mobile-darmasaba/components/selectForm.tsx

import Styles from "@/constants/Styles";
import { useTheme } from "@/providers/ThemeProvider";
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?: string
};

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