import React, {JSX} from 'react';
import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native';
import {CustomPressable} from '../Button';
import {fontSz, ms, Colors} from '../../utils';
import {Text} from '../Text';

interface CheckBoxProps {
  label: string | JSX.Element;
  selected: boolean;
  onPress: () => void;
  containerStyle?: StyleProp<ViewStyle>;
}

const CheckBox: React.FC<CheckBoxProps> = ({
  label,
  selected = true,
  onPress,
  containerStyle,
}) => {
  return (
    <CustomPressable onPress={onPress} activeOpacity={0.8}>
      <View style={[styles.radioButton, containerStyle]}>
        <View style={[styles.radioButtonInner]}>
          {selected && <View style={[styles.radioButtonSelected]} />}
        </View>

        {typeof label === 'string' ? (
          <Text
            fontSize={fontSz(12)}
            fontFamily="Gordita-Medium"
            fontWeight="400"
            text={`${label}`}
            color={Colors.inputBackground}
          />
        ) : (
          label
        )}
      </View>
    </CustomPressable>
  );
};

export default CheckBox;

const styles = StyleSheet.create({
  radioButton: {
    flexDirection: 'row',
    alignItems: 'center',
    marginVertical: ms(5),
  },
  radioButtonInner: {
    width: ms(20),
    height: ms(20),
    borderRadius: ms(4),
    borderWidth: ms(1.5),
    borderColor: Colors.gray500,
    marginRight: ms(10),
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: Colors.white,
  },
  radioButtonSelected: {
    width: ms(12),
    height: ms(12),
    borderRadius: ms(2),
    backgroundColor: Colors.purple60,
  },
});