Mobile/components/CheckBox.tsx

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

export type CheckBoxDirection = "row" | "col";

interface CheckBoxProps extends ViewProps {
  label?: string;
  onChange: () => void;
  antIcon?: AntDesignIconNames;
  entypoIcon?: EntypoIconNames;
  fontAwesomeIcon?: FontAwesomeIconNames;
  fontAwesome6Icon?: FontAwesome6IconNames;
  communityIcon?: CommunityIconNames;
  IonIcon?: IonIconNames;
  value: boolean;
  isCheckIconVisible?: boolean;
  endText?: string;
  direction?: CheckBoxDirection;
}

export default forwardRef<any, CheckBoxProps>(
  (
    {
      label,
      onChange,
      antIcon,
      entypoIcon,
      fontAwesomeIcon,
      fontAwesome6Icon,
      communityIcon,
      IonIcon,
      value,
      isCheckIconVisible,
      endText,
      direction,
      className,
      ...props
    },
    ref
  ) => {
    return (
      <TouchableOpacity
        onPress={onChange}
        className={
          "items-center p-4 rounded-3xl" +
          " " +
          ((direction ?? "row") == "row"
            ? "flex-row justify-between gap-4"
            : "justify-center gap-1") +
          " " +
          (value
            ? "bg-orange-600 border-4 border-orange-300"
            : "bg-gray-300 border-4 border-gray-300") +
          " " +
          (className ?? "")
        }
        {...props}
        {...ref}
      >
        <View>
          {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}
          {fontAwesome6Icon ? (
            <FontAwesome6
              name={fontAwesome6Icon}
              size={30}
              color={value ? "white" : "black"}
            />
          ) : null}
          {IonIcon ? (
            <Ionicons
              name={IonIcon}
              size={30}
              color={value ? "white" : "black"}
            />
          ) : null}
        </View>

        {label != null ? (
          <Text
            weight="bold"
            color={value ? "white" : "black"}
            className={(direction ?? "row") == "row" ? "flex-1" : ""}
          >
            {label}
          </Text>
        ) : null}

        {isCheckIconVisible ? (
          <View
            className={
              "h-5 w-5 rounded border justify-center items-center" +
              " " +
              (value ? "border-white" : "border-black")
            }
          >
            {value && <View className="h-2 w-2 bg-white" />}
          </View>
        ) : null}

        {endText != null ? (
          <Text color={value ? "white" : "black"}>{endText}</Text>
        ) : null}
      </TouchableOpacity>
    );
  }
);