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

interface CheckButtonProps {
    label: string;
    value: boolean;
    onChange: () => void;
    icon: AntDesignIconNames | string;
}

const CheckButton: React.FC<CheckButtonProps> = ({ label, value, onChange, icon }) => {
    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-basis-1/3 items-center`}>
            <View className="mr-2.5">
                {AwesomIconList.includes(icon) ? (
                    <FontAwesome6 name={icon} size={30} color={value ? "white" : "black"}/>
                ) : (
                    <AntDesign name={icon ?? "arrowleft"} size={30} color={value ? "white" : "black"}/>
                )}
            </View>

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

export default CheckButton;