crazycharge-app/component/global/select_button.tsx

import React from 'react';
import {
    Text,
    View,
    StyleSheet,
    ViewStyle,
    StyleProp,
    TouchableOpacity
} from 'react-native';

type Option = {
    label: string;
};

interface SingleSelectButtonGroupProps {
    options: Option[];
    onSelectionChange: (value: string) => void;
    extendedStyle?: StyleProp<ViewStyle>;
    selectedOption: string | null | undefined;
}

const SingleSelectButtonGroup: React.FC<SingleSelectButtonGroupProps> = ({
    options,
    onSelectionChange,
    extendedStyle,
    selectedOption
}) => {
    return (
        <View>
            {options.map((option, index) => (
                <TouchableOpacity
                    key={index}
                    style={[
                        styles.button,
                        selectedOption === option.label &&
                            styles.selectedButton,
                        extendedStyle
                    ]}
                    onPress={() => onSelectionChange(option.label)}
                >
                    <Text style={{ fontSize: 16 }}>{option.label}</Text>
                    <View
                        style={[
                            styles.circle,
                            selectedOption === option.label &&
                                styles.selectedCircle
                        ]}
                    />
                </TouchableOpacity>
            ))}
        </View>
    );
};

const styles = StyleSheet.create({
    button: {
        maxWidth: '100%',
        padding: 20,
        marginBottom: 10,
        borderWidth: 1,
        justifyContent: 'space-between',
        alignItems: 'center',
        flexDirection: 'row',
        borderRadius: 12,
        borderColor: '#bbbbbb'
    },
    circle: {
        width: 10,
        height: 10,
        borderRadius: 5,
        backgroundColor: '#e8e8e8',
        borderWidth: 1,
        borderColor: '#bbbbbb'
    },
    selectedButton: {
        borderWidth: 1,
        borderColor: '#949494'
    },
    selectedCircle: {
        backgroundColor: '#949494'
    },
    redOutline: {
        borderWidth: 1,
        borderColor: 'red'
    }
});

export default SingleSelectButtonGroup;