import { TouchableOpacity, View } from "react-native";
import { Text } from "react-native-paper";

interface CustomCheckboxProps {
  checked: boolean;
  onPress: () => void;
  size?: number;
}

export const CustomCheckbox = ({
  checked,
  onPress,
  size = 20,
}: CustomCheckboxProps) => {
  return (
    <TouchableOpacity
      onPress={onPress}
      activeOpacity={1}
      style={{
        width: size,
        height: size,
        justifyContent: "center",
        alignItems: "center",
        paddingRight: 8,
      }}
    >
      <View
        style={{
          width: size,
          height: size,
          borderWidth: checked ? 0 : 1,
          borderRadius: 2,
          justifyContent: "center",
          alignItems: "center",
          backgroundColor: checked ? "#6750a4" : "transparent",
        }}
      >
        {checked && (
          <Text
            style={{ color: "white", fontSize: size * 0.6, lineHeight: size }}
          >
            ✓
          </Text>
        )}
      </View>
    </TouchableOpacity>
  );
};