import React, { FC } from 'react';
import Checkbox from 'expo-checkbox';
import { Text, View } from 'react-native';

import { Colors } from '../../theme';
import { styles } from './styles';

type Props = {
  onChange?: (value: boolean) => void;
  value?: boolean;
  label?: string;
  color?: string;
  disabled?: boolean;
};

export const CheckBox: FC<Props> = ({ value, onChange, label, color, disabled }) => {
  return (
    <View style={styles.wrapper}>
      <Checkbox
        style={{ backgroundColor: Colors.WHITE }}
        color={color || Colors.ORANGE}
        value={value}
        onValueChange={onChange}
        disabled={disabled}
      />
      {label ? <Text style={styles.text}>{label}</Text> : null}
    </View>
  );
};