import React from 'react';
import { Pressable, Text, View } from 'react-native';
import { styles } from '../styles';

export default function ChipGroup({ options, value, onChange }) {
  return (
    <View style={styles.chipGroup}>
      {options.map((option) => {
        const active = value === option;
        return (
          <Pressable key={option} style={[styles.chip, active && styles.chipActive]} onPress={() => onChange(option)}>
            <Text style={[styles.chipText, active && styles.chipTextActive]}>{option}</Text>
          </Pressable>
        );
      })}
    </View>
  );
}