Mobile/components/CheckboxComponent.tsx

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

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

const CheckBox: React.FC<CheckBoxProps> = ({
  label,
  onChange,
  antIcon,
  entypoIcon,
  fontAwesomeIcon,
  communityIcon,
  value,
}) => {
  let AwesomIconList = ["weight-scale", "beer"];
  return (
    <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"
      } flex-row items-center`}
    >
      <View className="mr-2.5">
        {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}
      </View>

      <Text className={`${value ? "text-white" : "text-black"} flex-1`}>
        {label}
      </Text>

      <View
        className={`h-5 w-5 rounded border ${
          value ? "border-white" : "border-black"
        } items-center justify-center mr-2.5`}
      >
        {value && <View className="h-2 w-2 bg-white" />}
      </View>
    </TouchableOpacity>
  );
};

export default CheckBox;