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 CheckBoxProps {
    label: string;
    value: boolean;
    onChange: () => void;
    icon: AntDesignIconNames | string;
}

const CheckBox: React.FC<CheckBoxProps> = ({ 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-row 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>

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