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

interface Props {
  checked: boolean;
  onToggle: () => void;
  text: ReactNode;
}

/** 协议勾选框：默认勾选 / 点击切换 */
export function AgreementCheckbox({ checked, onToggle, text }: Props) {
  return (
    <View style={styles.row}>
      <Pressable style={[styles.box, checked && styles.boxChecked]} onPress={onToggle} hitSlop={6}>
        {checked ? <Ionicons name="checkmark" size={14} color={colors.textInverse} /> : null}
      </Pressable>
      <View style={styles.textWrap}>{text}</View>
    </View>
  );
}

const styles = StyleSheet.create({
  row: { flexDirection: 'row', alignItems: 'center', gap: 10 },
  box: {
    width: 20,
    height: 20,
    borderRadius: 10,
    borderWidth: 1.5,
    borderColor: colors.borderStrong,
    alignItems: 'center',
    justifyContent: 'center',
  },
  boxChecked: { backgroundColor: colors.primary, borderColor: colors.primary },
  textWrap: { flex: 1, flexShrink: 1 },
});