import React from "react";
import {
  Bubble,
  Icon,
  Button,
  Text,
  Input,
  Select,
} from "@tencent/tea-component";

export default function BubbleExample() {
  return (
    <>
      <section>
        <Text theme="label" verticalAlign="middle">
          为图标添加解释：
        </Text>
        <Text verticalAlign="middle" style={{ marginRight: 5 }}>
          CNAME
        </Text>
        <Bubble
          arrowPointAtCenter
          placement="top-end"
          content="此域名是加速域名 CNAME 到 CDN 节点上的地址"
        >
          <Icon type="info" />
        </Bubble>
      </section>

      <section>
        <Text theme="label" verticalAlign="middle">
          为按钮添加解释：
        </Text>
        <Bubble content="请选择你要删除的云主机">
          <Button>删除</Button>
        </Bubble>
      </section>

      <section>
        <Text theme="label" verticalAlign="middle">
          为操作添加解释：
        </Text>
        <Bubble content="运行中的主机无法删除">
          <Button type="text" disabled>
            删除
          </Button>
        </Bubble>
      </section>
      <section>
        <Bubble content="当前状态无法编辑">
          <Input disabled />
        </Bubble>
      </section>
      <section>
        <Bubble content="当前状态无法编辑">
          <Select size="m" appearance="button" disabled type="simulate" />
        </Bubble>
      </section>
    </>
  );
}