import React, { useState } from "react";
import { Status, Form, Segment, Card } from "@tencent/tea-component";

export default function StatusExample() {
  const [icon, setIcon] = useState("blank");
  const [size, setSize] = useState("l");

  return (
    <>
      <Form style={{ marginBottom: 20 }}>
        <Form.Item label="图标">
          <Segment
            value={icon}
            onChange={icon => setIcon(icon)}
            options={[
              { value: "blank", bubble: "内容为空" },
              { value: "chart", bubble: "图表为空或异常" },
              { value: "loading", bubble: "加载中" },
              { value: "network", bubble: "网络异常" },
              { value: "no-permission", bubble: "无权限" },
              { value: "pay", bubble: "待续费" },
              { value: "search", bubble: "搜索无结果" },
              { value: "upload", bubble: "图片上传" },
            ]}
          />
        </Form.Item>
        <Form.Item label="尺寸">
          <Segment
            value={size}
            onChange={size => setSize(size)}
            options={[
              { value: "l" },
              { value: "m" },
              { value: "s" },
              { value: "xs" },
            ]}
          />
        </Form.Item>
      </Form>

      <div className="example-stage">
        <Card>
          <Status
            // @ts-ignore
            icon={icon}
            // @ts-ignore
            size={size}
            title={size === "l" && "暂无数据"}
            description="该状态的详细描述"
            operation={<a>立即新建</a>}
          />
        </Card>
      </div>
    </>
  );
}