Mobile/components/CheckButtonComponent.tsx

import React, {Component} from "react";
import {View, Text, TouchableOpacity, Image} from "react-native";
import {
    AntDesign,
    Entypo,
    FontAwesome6,
    MaterialCommunityIcons,
} from "@expo/vector-icons";
import {
    AntDesignIconNames,
    CommunityIconNames,
    EntypoIconNames,
    FontAwesomeIconNames,
} from "./Icons";

interface CheckButtonProps {
    label: string;
    value: boolean;
    onChange: () => void;
    antIcon?: AntDesignIconNames;
    entypoIcon?: EntypoIconNames;
    fontAwesomeIcon?: FontAwesomeIconNames;
    communityIcon?: CommunityIconNames;
}

const CheckButton: React.FC<CheckButtonProps> = ({ label, value, onChange, antIcon,
                                                     entypoIcon,
                                                     fontAwesomeIcon,
                                                     communityIcon, }) => {
    return (
        <View style={{ flexBasis: "33.33%"}}>
        <TouchableOpacity onPress={onChange} className={`p-5 m-1 rounded-3xl ${value ? 'bg-orange-600 border-4 border-orange-300' : 'bg-gray-300 border-4 border-gray-300'} items-center`}>
            {antIcon ? (
                <AntDesign
                    name={antIcon}
                    size={30}
                    color={value ? "white" : "black"}
                />
            ) : null}
            {entypoIcon ? (
                <Entypo
                    name={entypoIcon}
                    size={30}
                    color={value ? "white" : "black"}
                />
            ) : null}
            {communityIcon ? (
                <MaterialCommunityIcons
                    name={communityIcon}
                    size={30}
                    color={value ? "white" : "black"}
                />
            ) : null}
            {fontAwesomeIcon ? (
                <FontAwesome6
                    name={fontAwesomeIcon}
                    size={30}
                    color={value ? "white" : "black"}
                />
            ) : null}

            <Text className={`${value ? 'text-white' : 'text-black'}`}>{label}</Text>
        </TouchableOpacity>
        </View>
    );
};

export default CheckButton;