import {
    GestureResponderEvent,
    StyleProp,
    StyleSheet,
    TouchableOpacity,
    ViewStyle,
} from 'react-native';
import useColors from '@/hooks/useColors.ts';
import ThemeText from '@/components/base/themeText.tsx';
import React from 'react';
import rpx from '@/utils/rpx.ts';

export function Button(props: {
    type?: 'normal' | 'primary';
    text: string;
    style?: StyleProp<ViewStyle>;
    onPress?: (evt: GestureResponderEvent) => void;
}) {
    const {type = 'normal', text, style, onPress} = props;
    const colors = useColors();

    return (
        <TouchableOpacity
            activeOpacity={0.6}
            onPress={onPress}
            style={[
                styles.bottomBtn,
                {
                    backgroundColor:
                        type === 'normal' ? colors.placeholder : colors.primary,
                },
                style,
            ]}>
            <ThemeText color={type === 'normal' ? undefined : 'white'}>
                {text}
            </ThemeText>
        </TouchableOpacity>
    );
}

const styles = StyleSheet.create({
    bottomBtn: {
        borderRadius: rpx(8),
        flexShrink: 0,
        justifyContent: 'center',
        alignItems: 'center',
        height: rpx(72),
    },
});