import Styles from "@/constants/Styles";
import { useTheme } from "@/providers/ThemeProvider";
import { TouchableOpacity } from "react-native";
import Text from "./Text";

type Props = {
   active: string
   value: string
   onPress: () => void
   label: string
   icon: React.ReactNode
   n: number
}


export default function ButtonTab({ active, value, onPress, label, n, icon }: Props) {
   const { colors } = useTheme();
   return (
      <TouchableOpacity style={[Styles.btnTab, (active == value) && { backgroundColor: colors.tabActive }, { width: n == 2 ? '50%' : 'auto' }]} onPress={() => { onPress() }}>
         {icon}
         <Text numberOfLines={1} style={[Styles.textMediumSemiBold, Styles.ml10, { color: active == value ? 'white' : colors.dimmed }]}>{label}</Text>
      </TouchableOpacity>
   )
}