import { Image } from '@tarojs/components';

import { Checkbox } from '@taroify/core';
import { CheckboxProps, CheckboxGroupProps } from '@taroify/core/checkbox';

import './index.less';

interface IProps extends CheckboxProps {
  text: string;
  value: BL.Anything[];
}

interface IGroupProps extends CheckboxGroupProps {}

const PREFIX = 'profile-checkbox';

export function BlCheckboxGroup(props: IGroupProps) {
  return <Checkbox.Group className={`${PREFIX}__group`} direction="horizontal" {...props} />;
}

export function BlCheckbox(props: IProps) {
  const { name, text, value } = props;

  return (
    <Checkbox
      className={`${PREFIX}__item`}
      name={name}
      icon={
        <Image
          className={`${PREFIX}__icon`}
          mode="aspectFit"
          src={
            value.includes(name)
              ? require('@/statics/svg/radio-checked.svg')
              : require('@/statics/svg/radio-uncheck.svg')
          }
        />
      }
    >
      {text}
    </Checkbox>
  );
}
