import React from 'react';
import { TouchableOpacity, View, Text } from 'react-native';
import { CheckBoxProps } from './checkBox.props';
import { styles } from './checkBox.styles';

export function CheckBox({
  value,
  onValueChange,
  label,
  containerStyle,
  labelStyle,
}: CheckBoxProps) {
  const handlePress = () => {
    onValueChange(!value);
  };

  return (
    <TouchableOpacity
      activeOpacity={0.7}
      style={[styles.container, containerStyle]}
      onPress={handlePress}
    >
      <View style={[styles.box, value && styles.boxSelected]}>
        {value && <Text style={styles.checkmark}>✓</Text>}
      </View>
      {label && <Text style={[styles.label, labelStyle]}>{label}</Text>}
    </TouchableOpacity>
  );
}