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

import { Radio } from '@taroify/core';
import { RadioGroupProps, RadioProps } from '@taroify/core/radio';

import './index.less';

interface IProps extends RadioProps {
  text: string;
  value: BL.Anything;
}

interface IGroupProps extends RadioGroupProps {}

const PREFIX = 'bl-form-radio';

export function BlFormRadioGroup(props: IGroupProps) {
  return <Radio.Group className={`${PREFIX}__group`} {...props} />;
}

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

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