import { View, Text, Image, TouchableOpacity } from "react-native";
import { SimpleSwitch } from "./SimpleSwitch";
export const SwitchArea = ({
  str,
  bool,
  setBool,
  falseImage,
  trueImage,
  falseText,
  trueText,
  children,
}) => {
  return (
    <View
      style={{
        flexDirection: "column",
        padding: 10,
        backgroundColor: "#00000010",
        borderRadius: 10,
        margin: 5,
      }}
    >
      <Text
        style={{
          fontSize: 25,
          alignItems: "center",
          alignContent: "center",
          textAlign: "center",
          textAlignVertical: "center",
          fontWeight: "bold",
        }}
      >
        {str}
      </Text>
      <View style={{ flexDirection: "row", padding: 10 }}>
        <SimpleSwitch
          bool={bool}
          setBool={setBool}
          color="red"
          value={false}
          image={falseImage}
          subText={falseText}
        />
        <SimpleSwitch
          bool={bool}
          setBool={setBool}
          color="red"
          value={true}
          image={trueImage}
          subText={trueText}
        />
      </View>
      {bool == "true" && children}
    </View>
  );
};