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

type Props = {
   title: string
   onPress?: () => void,
   icon?: ReactNode,
   borderBottom?: boolean
   value?: string
}

export default function ButtonSetting({ title, onPress, icon, borderBottom = true, value }: Props) {
   const { colors } = useTheme();
   return (
      <Pressable onPress={onPress}>
         <View style={[
            Styles.p10,
            Styles.rowSpaceBetween,
            { borderBottomWidth: borderBottom ? 1 : 0, borderColor: colors.icon + '20' },
         ]}>
            <View style={[Styles.rowItemsCenter]}>
               {icon}
               <Text style={[{ color: colors.text }, Styles.ml05]}>{title}</Text>
            </View>
            {value && <Text style={[{ color: colors.dimmed, alignSelf: 'center' }]}>{value}</Text>}
         </View>
      </Pressable>
   )

}