import { Ionicons } from "@expo/vector-icons";
import { Pressable, StyleSheet, Text } from "react-native";

interface LabeledIconButtonProps {
    style?: any;
    label: string;
    icon: keyof typeof Ionicons.glyphMap;
    iconSize?: number;
    iconColor?: string;
    backgroundColor?: string;
    onPress: () => void;
    disabled?: boolean;
}

export default function LabeledIconButton({
    style,
    label,
    icon,
    iconSize = 24,
    iconColor = "white",
    backgroundColor = "grey",
    onPress,
    disabled = false,
}: LabeledIconButtonProps) {
    return (
        <Pressable
            style={({ hovered, pressed }) => [
                styles.button,
                { backgroundColor },
                style,
                disabled && styles.disabledButton,
                hovered && !disabled && styles.hoveredButton,
                pressed && !disabled && styles.pressedButton,
            ]}
            onPress={onPress}
            disabled={disabled}
        >
            <Ionicons name={icon} size={iconSize} color={iconColor} />
            <Text style={[styles.text, { color: iconColor }]}>{label}</Text>
        </Pressable>
    );
}

const styles = StyleSheet.create({
    button: {
        width: 100,
        height: 100,
        borderRadius: 10,
        backgroundColor: '#333',
        flexDirection: 'column',
        justifyContent: "center",
        alignItems: "center",
        boxShadow: "0 0px 4px rgba(0, 0, 0, 0.2)",
        gap: 4,
    },
    disabledButton: {
        opacity: 0.4,
    },
    pressedButton: {
        transform: [{ scale: 0.98 }],
    },
    hoveredButton: {
        transform: [{ scale: 1.02 }],
        opacity: 0.8,
    },
    text: {
        fontSize: 12,
    },
});