import React from 'react';
import { Pressable, View } from 'react-native';
import { IconXMarksmall1 } from '../../../icons';
import { CheckboxIconProps } from '../../../core';
import { useTheme } from '../../Theme';

const SingleCheckboxIcon: React.FC<CheckboxIconProps> = ({
  active,
  disabled,
  onPress,
  size,
}) => {
  const token = useTheme();
  const getIconComponent = () => {
    if (active) {
      return (
        <IconXMarksmall1 fillColor={token['--color-text-6']} size={size} />
      );
    }
    return <View style={{ width: size }} />; //占位
  };

  return !disabled ? (
    <Pressable onPress={onPress}>
      <View>{getIconComponent()}</View>
    </Pressable>
  ) : (
    getIconComponent()
  );
};

export default SingleCheckboxIcon;