spoon/apps/expo/src/components/ui/radio-list.tsx

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

export type RadioOption<T extends string> = {
  description?: string;
  label: string;
  value: T;
};

export const RadioList = <T extends string>({
  label,
  onChange,
  options,
  value,
}: {
  label: string;
  onChange: (value: T) => void;
  options: RadioOption<T>[];
  value: T;
}) => (
  <View className='gap-2'>
    <Text className='text-muted-foreground text-xs font-medium'>{label}</Text>
    <View className='gap-2'>
      {options.map((option) => {
        const active = option.value === value;
        return (
          <Pressable
            key={option.value}
            className={
              active
                ? 'border-primary bg-primary/10 rounded-md border p-3'
                : 'border-border rounded-md border p-3'
            }
            onPress={() => onChange(option.value)}
          >
            <Text className='text-foreground font-medium'>{option.label}</Text>
            {option.description ? (
              <Text className='text-muted-foreground mt-1 text-xs'>
                {option.description}
              </Text>
            ) : null}
          </Pressable>
        );
      })}
    </View>
  </View>
);