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

export default function BubblePlacementExample() {
  const bubbleAt = placement => (
    <td style={{ padding: 5 }}>
      <Bubble
        placement={placement}
        content={
          <>
            我的定位是 {placement}
            <br />
            我的定位是 {placement}
            <br />
            我的定位是 {placement}
          </>
        }
      >
        <Button type="weak">👻</Button>
      </Bubble>
    </td>
  );

  return (
    <table style={{ margin: "auto" }}>
      <tbody>
        <tr>
          <td />
          {bubbleAt("top-start")}
          {bubbleAt("top")}
          {bubbleAt("top-end")}
          <td />
        </tr>
        <tr>
          {bubbleAt("left-start")}
          <td
            colSpan={3}
            rowSpan={3}
            style={{
              textAlign: "center",
              border: "1px solid #999",
              background: "#f0f0f0",
            }}
          >
            如果显示区域不足，
            <br />
            会自动更改弹出位置
            <br />
            可以尝试调整窗口尺寸
          </td>
          {bubbleAt("right-start")}
        </tr>
        <tr>
          {bubbleAt("left")}
          {bubbleAt("right")}
        </tr>
        <tr>
          {bubbleAt("left-end")}
          {bubbleAt("right-end")}
        </tr>
        <tr>
          <td />
          {bubbleAt("bottom-start")}
          {bubbleAt("bottom")}
          {bubbleAt("bottom-end")}
          <td />
        </tr>
      </tbody>
    </table>
  );
}