mobile-darmasaba/components/borderBottomItemVertical.tsx

import Styles from "@/constants/Styles";
import { useTheme } from "@/providers/ThemeProvider";
import React, { useState } from "react";
import { Dimensions, Pressable, View } from "react-native";
import Text from "./Text";

type Props = {
   title?: string
   icon: React.ReactNode
   desc?: string
   rightTopInfo?: string
   onPress?: () => void
   onLongPress?: () => void
   borderType: 'all' | 'bottom' | 'none'
   titleWeight?: 'normal' | 'bold'
   bgColor?: string
   descEllipsize?: boolean
   textColor?: string,
   titleShowAll?: boolean
}

export default function BorderBottomItemVertical({ title, icon, desc, onPress, onLongPress, rightTopInfo, borderType, titleWeight, bgColor, descEllipsize, textColor, titleShowAll }: Props) {
   const { colors } = useTheme();
   const textColorFix = textColor ? textColor : colors.text;

   return (
      <Pressable onLongPress={onLongPress} onPress={onPress}
         style={({ pressed }) => [
            borderType == 'bottom'
               ? [Styles.wrapItemBorderBottom, { borderBottomColor: colors.icon + '20' }]
               : borderType == 'all'
                  ? [Styles.wrapItemBorderAll, { borderColor: colors.icon + '20' }]
                  : Styles.wrapItemBorderNone,
            bgColor == "transparent" ? { backgroundColor: 'transparent' } : { backgroundColor: colors.card },
         ]}
      >
         <View style={Styles.rowItemsCenter}>
            {icon}
            <View style={[Styles.ml10, { flex: 1 }]}>
               <View style={Styles.rowSpaceBetween}>
                  <View style={{ flex: 1, marginRight: 10 }}>
                     <Text style={[titleWeight == 'normal' ? Styles.textDefault : Styles.textDefaultSemiBold, { color: textColorFix }]} numberOfLines={titleShowAll ? 0 : 1} ellipsizeMode='tail'>{title}</Text>
                  </View>
                  {
                     rightTopInfo && <Text style={[Styles.textInformation, Styles.mt05, { color: textColorFix }]}>{rightTopInfo}</Text>
                  }
               </View>
               {desc && <Text style={[Styles.textDefault, { textAlign: 'left', color: textColorFix }]} numberOfLines={descEllipsize == false ? 0 : 2} ellipsizeMode='tail'>{desc}</Text>}
            </View>
         </View>
      </Pressable>
   )
}