import { ThemedText } from "@/components/ThemedText";
import { ActivityIndicator, StyleSheet, TouchableOpacity } from "react-native";

interface Props {
    isLoading?: boolean;
    onPress?: () => void;
    text: string
    bg?: string
    color?: string
}
const StepButton = (props: Props) => {
    const { isLoading, onPress, text, bg, color } = props

    return (
        <TouchableOpacity
            style={[styles.button, isLoading && styles.disabledButton, { backgroundColor: bg ? bg : '#E2793F' }]}
            onPress={onPress}
            disabled={isLoading}
        >
            {isLoading ? (
                <ActivityIndicator color="#fff" />
            ) : (
                <ThemedText style={[styles.buttonText, { color: color ? color : '#FFFFFF' }]}>
                    {text}
                </ThemedText>
            )}
        </TouchableOpacity>
    )
}

const styles = StyleSheet.create({
    button: {
        width: '100%',
        backgroundColor: '#E2793F',
        borderRadius: 32,
        padding: 18,
        alignItems: 'center'
    },
    disabledButton: {
        opacity: 0.7,
    },
    buttonText: {
        color: '#FFFFFF',
        fontWeight: '600',
        fontSize: 18,
    },
});

export default StepButton