import { ScrollView, Text, TouchableOpacity, StyleSheet, View } from "react-native";
import { LIGHT_THEME } from "../../common/const/theme";
import { IOption } from "../../common/domain/entities/option";

interface MultipleOptionPickerProps {
    options: IOption[];
    toogleOption: (optionId: number) => void;
}

export const MultipleOptionPicker = ({ options, toogleOption }: MultipleOptionPickerProps) => {

    return (
        <View style={styles.container}>
            {options.map(option => (
                <TouchableOpacity
                    key={option.id}
                    onPress={() => toogleOption(option.id)}
                    style={{...styles.optionBtn, backgroundColor: option.isSelected ? LIGHT_THEME.color.primary : LIGHT_THEME.color.terciary}}
                >
                    <Text style={{...styles.optionText, color: option.isSelected ? LIGHT_THEME.color.white : LIGHT_THEME.color.secondary }}>{option.name}</Text>
                </TouchableOpacity>
            ))}
        </View>
    );
}

const styles = StyleSheet.create({
    container : {
        padding: 20,
        flexWrap: "wrap",
        flexDirection: "row",
        gap: 10,
        width: "100%",
    },
    optionBtn: {
        paddingVertical: 10,
        paddingHorizontal: 20,
        height: 40,
        borderRadius: 20,
    },
    optionText: {
        fontSize: 16,
    },
});
