import { Ionicons } from '@expo/vector-icons';
import { Pressable, StyleSheet, Text, View } from 'react-native';
import { colors } from '../../../src/theme';

interface Props {
  label: string;
  selected?: boolean;
  onPress?: () => void;
  desc?: string;
}

/** 单选行：选中态填充高亮 + 勾选标记 */
export function RadioRow({ label, selected = false, onPress, desc }: Props) {
  return (
    <Pressable style={[styles.row, selected && styles.rowSelected]} onPress={onPress}>
      <View style={styles.textCol}>
        <Text style={[styles.label, selected && styles.labelSelected]}>{label}</Text>
        {desc ? <Text style={styles.desc}>{desc}</Text> : null}
      </View>
      <View style={[styles.dot, selected && styles.dotSelected]}>
        {selected ? <Ionicons name="checkmark" size={14} color={colors.textInverse} /> : null}
      </View>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingVertical: 8,
    paddingHorizontal: 8,
    borderRadius: 8,
    borderWidth: 1,
    borderColor: colors.border,
    backgroundColor: colors.white,
  },
  rowSelected: { borderColor: colors.primary, backgroundColor: colors.primaryLight },
  textCol: { flex: 1, paddingRight: 12 },
  label: { fontSize: 15, fontWeight: '600', color: colors.textPrimary },
  labelSelected: { color: colors.primaryText },
  desc: { fontSize: 12, color: colors.textHint, marginTop: 4 },
  dot: {
    width: 22,
    height: 22,
    borderRadius: 11,
    borderWidth: 1.5,
    borderColor: colors.borderStrong,
    alignItems: 'center',
    justifyContent: 'center',
  },
  dotSelected: { borderColor: colors.primary, backgroundColor: colors.primary },
});