import {Text, TouchableOpacity, View} from "react-native";
import React from "react";
import {styles} from "./Styles";
import {ParamProps} from "./Interfaces";

export const SelectItem : React.FunctionComponent<ParamProps> = ({
                           label,
                           values,
                           selectedValue,
                           setSelectedValue,
                       }) => (
    <View style={{ padding: 10 }}>
        <Text style={styles.Title}>{label}</Text>
        <View style={styles.row}>
            {values.map((value:string) => (
                <TouchableOpacity
                    key={value}
                    onPress={() => setSelectedValue(value)}
                    style={[
                        styles.button,
                        selectedValue === value && styles.selected,
                    ]}
                >
                    <Text
                        style={[
                            styles.buttonLabel,
                            selectedValue === value && styles.selectedLabel,
                        ]}
                    >
                        {value}
                    </Text>
                </TouchableOpacity>
            ))}
        </View>
    </View>
);
