import { Pressable, ScrollView, Text } from 'react-native';

export const ChipRow = <T extends string>({
  onChange,
  options,
  value,
}: {
  onChange: (value: T) => void;
  options: { label: string; value: T }[];
  value: T;
}) => (
  <ScrollView
    horizontal
    contentContainerClassName='gap-2'
    showsHorizontalScrollIndicator={false}
  >
    {options.map((option) => {
      const active = option.value === value;
      return (
        <Pressable
          key={option.value}
          className={
            active
              ? 'bg-primary rounded-md px-3 py-2'
              : 'bg-muted rounded-md px-3 py-2'
          }
          onPress={() => onChange(option.value)}
        >
          <Text
            className={
              active
                ? 'text-primary-foreground text-xs font-semibold'
                : 'text-muted-foreground text-xs font-semibold'
            }
          >
            {option.label}
          </Text>
        </Pressable>
      );
    })}
  </ScrollView>
);
