/**
 * title: "带描述的多选框"
 * description: "使用 `<Checkbox.Group>` 渲染 `<Checkbox>` 分组,定制Checkbox的children添加描述"
 */
import React, { useState } from 'react';
import { Checkbox } from '@alicloud/console-components';

const List = [
  {
    label: '文本信息',
    value: 'A',
  },
  {
    label: '文本信息',
    value: 'B',
  },
  {
    label: '文本信息',
    value: 'C',
    disabled: true,
  },
];

const itemStyle = {
  marginLeft: '24px',
  color: '#808080',
  display: 'inline-block',
  lineHeight: '16px',
};

export default () => {
  const [checkedList, setCheckedList] = useState<Array<any>>([]);
  return (
    <Checkbox.Group value={checkedList} direction="ver" onChange={setCheckedList}>
      {List.map((item) => (
        <Checkbox value={item.value} disabled={item.disabled}>
          {item.label}
          <br />
          <span style={itemStyle}>对于选项的描述/解释文案，对于选项的描述/解释文案</span>
        </Checkbox>
      ))}
    </Checkbox.Group>
  );
};