import { MaterialIcons } from '@expo/vector-icons';
import React from 'react';
import { StyleSheet, TouchableOpacity } from 'react-native';

interface CustomCheckBoxProps {
  checked: boolean;
  onCheckedChange: (checked: boolean) => void;
  size?: number;
  checkedColor?: string;
  uncheckedColor?: string;
}

const CustomCheckBox = (props: CustomCheckBoxProps) => {
  const {
    checked,
    onCheckedChange,
    size = 16,
    checkedColor = '#E91E63',
    uncheckedColor = '#999'
  } = props;

  return (
    <TouchableOpacity
      style={[styles.container, { width: size + 4, height: size + 4 }]}
      onPress={() => onCheckedChange(!checked)}
      activeOpacity={0.7}
    >
      {checked ? (
        <MaterialIcons
          name="check-box"
          size={size}
          color={checkedColor}
        />
      ) : (
        <MaterialIcons
          name="check-box-outline-blank"
          size={size}
          color={uncheckedColor}
        />
      )}
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 8,
  },
});

export default CustomCheckBox;