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 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;