import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { useAppTheme } from '@theme';
import { getStyles } from './chipSelector.styles';

interface Option {
  label: string;
  value: string;
}

interface ChipSelectorProps {
  options: Option[];
  selected: string;
  onChange: (value: any) => void;
}

export const ChipSelector: React.FC<ChipSelectorProps> = ({
  options,
  selected,
  onChange,
}) => {
  const { colors } = useAppTheme();
  const styles = getStyles(colors);

  return (
    <View style={styles.container}>
      {options.map((option) => {
        const isActive = option.value === selected;

        return (
          <TouchableOpacity
            key={option.value}
            style={[styles.chip, isActive && styles.chipActive]}
            activeOpacity={0.7}
            onPress={() => onChange(option.value)}
          >
            <Text style={[styles.label, isActive && styles.labelActive]}>
              {option.label}
            </Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
};
export default ChipSelector;