import { MaterialCommunityIcons } from "@expo/vector-icons";
import {
    ActivityIndicator,
    Pressable,
    StyleSheet,
    Text,
    type StyleProp,
    type ViewStyle,
} from "react-native";

type AppButtonProps = {
    label: string;
    icon: keyof typeof MaterialCommunityIcons.glyphMap;
    onPress: () => void;
    loading?: boolean;
    disabled?: boolean;
    variant?: "primary" | "secondary";
    style?: StyleProp<ViewStyle>;
};

export function AppButton({
    label,
    icon,
    onPress,
    loading = false,
    disabled = false,
    variant = "primary",
    style,
}: AppButtonProps) {
    const isPrimary = variant === "primary";
    const iconColor = isPrimary ? "#ffffff" : "#1f2933";

    return (
        <Pressable
            accessibilityRole="button"
            onPress={onPress}
            disabled={disabled || loading}
            style={({ pressed }) => [
                styles.button,
                isPrimary ? styles.primary : styles.secondary,
                pressed ? styles.pressed : undefined,
                disabled || loading ? styles.disabled : undefined,
                style,
            ]}
        >
            {loading ? (
                <ActivityIndicator color={iconColor} />
            ) : (
                <>
                    <MaterialCommunityIcons name={icon} size={20} color={iconColor} />
                    <Text style={[styles.label, isPrimary ? styles.primaryLabel : styles.secondaryLabel]}>
                        {label}
                    </Text>
                </>
            )}
        </Pressable>
    );
}

const styles = StyleSheet.create({
    button: {
        alignItems: "center",
        borderRadius: 8,
        flexDirection: "row",
        gap: 8,
        justifyContent: "center",
        minHeight: 52,
        paddingHorizontal: 18,
    },
    primary: {
        backgroundColor: "#1b6ca8",
    },
    secondary: {
        backgroundColor: "#e7ece3",
    },
    label: {
        fontSize: 16,
        fontWeight: "700",
        lineHeight: 22,
    },
    primaryLabel: {
        color: "#ffffff",
    },
    secondaryLabel: {
        color: "#1f2933",
    },
    pressed: {
        opacity: 0.78,
    },
    disabled: {
        opacity: 0.66,
    },
});