import { BfRadio, BfRadioGroup } from '@bud-fe/react-taro-ui';
import { View } from '@tarojs/components';
import React, { useState } from 'react';

export default () => {
  const [singleChecked, setSingleChecked] = useState(true);
  const [groupChecked, setGroupChecked] = useState('1');

  return (
    <>
      <View className="group-title">BfRadio - 基本用法</View>
      <BfRadio
        label="选项1"
        value="1"
        checked={singleChecked}
        onChange={() => {
          setSingleChecked((pre) => !pre);
        }}
      />
      <View className="group-title">BfRadio - disabled=true</View>
      <BfRadio label="选项1" value="1" disabled />

      <View className="group-title">BfRadioGroup - 基本用法</View>
      <BfRadioGroup
        value={groupChecked}
        groups={[
          { label: '选项1', value: '1' },
          { label: '选项2', value: '2' },
          { label: '选项3', value: '3' },
          { label: '选项4', value: '4' },
          { label: '选项5', value: '5' },
          { label: '选项6', value: '6' },
          { label: '选项7', value: '7' },
        ]}
        onChange={(val) => setGroupChecked(val)}
      />
      <View className="group-title">BfRadioGroup - 垂直布局</View>
      <BfRadioGroup
        value={'1'}
        groups={[
          { label: '选项1', value: '1' },
          { label: '选项2', value: '2' },
          { label: '选项3', value: '3' },
        ]}
        layout="vertical"
      />
    </>
  );
};