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>;
	shouldShowRedOutline: boolean;
	selectedOption: string | null | undefined;
}

const SingleSelectButtonGroup: React.FC<SingleSelectButtonGroupProps> = ({
	options,
	onSelectionChange,
	extendedStyle,
	shouldShowRedOutline,
	selectedOption,
}) => {
	return (
		<View>
			{options.map((option, index) => (
				<TouchableOpacity
					key={index}
					style={[
						styles.button,
						selectedOption === option.label && styles.selectedButton,
						shouldShowRedOutline && styles.redOutline,
						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;