import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { useTheme } from 'react-native-paper';

interface ButtonConfig<T extends string> {
    value: T;
    label: string;
    checkedColor?: string; // Keep for potential future use or consistency
    style?: object; // Keep for potential future use or consistency
}

interface CustomSegmentedButtonsProps<T extends string> {
    value: T;
    onValueChange: (value: T) => void;
    buttons: ButtonConfig<T>[];
}

const CustomSegmentedButtons = <T extends string>({
    value,
    onValueChange,
    buttons,
}: CustomSegmentedButtonsProps<T>) => {
    const theme = useTheme();

    const styles = StyleSheet.create({
        container: {
            flexDirection: 'row',
            borderRadius: 20, // Increased border radius for a rounder look
            overflow: 'hidden',
            borderWidth: 1,
            borderColor: theme.colors.outline,
        },
        button: {
            flex: 1,
            paddingVertical: 8,
            paddingHorizontal: 12,
            alignItems: 'center',
            justifyContent: 'center',
            backgroundColor: theme.colors.surface, // Default background
        },
        buttonSelected: {
            backgroundColor: theme.colors.primaryContainer, // Selected background
        },
        buttonText: {
            color: theme.colors.onSurface, // Default text color
        },
        buttonTextSelected: {
            color: theme.colors.onPrimaryContainer, // Selected text color
            fontWeight: 'bold',
        },
        separator: {
            width: 1,
            backgroundColor: theme.colors.outline,
        },
    });

    return (
        <View style={styles.container}>
            {buttons.map((button, index) => (
                <React.Fragment key={button.value}>
                    <TouchableOpacity
                        style={[
                            styles.button,
                            value === button.value && styles.buttonSelected,
                            button.style, // Apply individual button styles if provided
                        ]}
                        onPress={() => onValueChange(button.value)}
                        activeOpacity={0.7}
                    >
                        <Text
                            style={[
                                styles.buttonText,
                                value === button.value && styles.buttonTextSelected,
                            ]}
                        >
                            {button.label}
                        </Text>
                    </TouchableOpacity>
                    {index < buttons.length - 1 && <View style={styles.separator} />}
                </React.Fragment>
            ))}
        </View>
    );
};

export default CustomSegmentedButtons;
