/**
 * title: "可点击或可删除类的动态交互标签，不支持彩色样式"
 * description: ""
 */
import React from 'react';
import { Tag, Grid, Icon } from '@alicloud/console-components';

const { Row, Col } = Grid;

export default () => {
  const [typeState, setTypeState] = React.useState<'primary'|'normal'>('normal');
  return (
    <div>
      <h4>默认</h4>
      <Row>
        <Col>
          <Tag.Selectable>默认标签</Tag.Selectable>
        </Col>
        <Col>
          <Tag.Closable type={typeState} onClick={() => {
            setTypeState(typeState === 'primary' ? 'normal' : 'primary');
          }}>默认标签</Tag.Closable>
        </Col>
        <Col>
          <Tag.Selectable><Icon type="sub-account-line" />默认标签</Tag.Selectable>
        </Col>
      </Row>
      <br />

      <h4>激活/选中</h4>
      <Row>
        <Col>
          <Tag.Selectable checked>默认标签</Tag.Selectable>
        </Col>
        <Col>
        <Tag.Closable type='primary' >默认标签</Tag.Closable>
        </Col>
        <Col>
          <Tag.Selectable checked><Icon type="sub-account-line" />默认标签</Tag.Selectable>
        </Col>
      </Row>
      <br />
      <h4>禁用</h4>
      <Row>
        <Col>
          <Tag disabled>默认标签</Tag>
        </Col>
        <Col>
          <Tag.Closable disabled>默认标签</Tag.Closable>
        </Col>
        <Col>
          <Tag disabled><Icon type="sub-account-line" />默认标签</Tag>
        </Col>
      </Row>
    </div>
  );
};