import RNCheckBox from '@react-native-community/checkbox';
import { StyleProp, TouchableOpacity, ViewStyle } from 'react-native';
import { Text } from '../../components/form/Text';
import { tw } from '../../core/tailwind';

type Props = React.ComponentProps<typeof RNCheckBox> & {
  value: boolean;
  label?: string;
  labelStyle?: StyleProp<ViewStyle>;
  onValueChange?: (value: boolean) => void;
  containerStyle?: StyleProp<ViewStyle>;
};

export function CheckBox({ value, label, labelStyle, onValueChange, containerStyle, ...restProps }: Props) {
  const onChange = () => {
    onValueChange && onValueChange(!value);
  };
  return (
    <TouchableOpacity style={[tw`flex-row gap-3 items-center`, containerStyle]} onPress={onChange}>
      <RNCheckBox
        value={value}
        tintColor={tw.color('bg-primary')}
        tintColors={{ true: tw.color('bg-primary'), false: tw.color('bg-primary') }}
        boxType="square"
        onCheckColor={tw.color('bg-dark')}
        onFillColor={tw.color('bg-primary')}
        onTintColor={tw.color('bg-primary')}
        style={tw`w-4 h-4`}
        {...restProps}
      />
      {label ? <Text style={[tw`text-[#8B8989] font-medium`, labelStyle]}>{label}</Text> : null}
    </TouchableOpacity>
  );
}