import React, { useState } from "react";
import {
  Button,
  Blank,
  Card,
  Layout,
  ExternalLink,
  Radio,
} from "@tencent/tea-component";

const { Body, Content } = Layout;

function BlankExample() {
  /**
   * @type [any, any]
   */
  const [theme, setTheme] = useState("permission");

  return (
    <Layout>
      <Body>
        <Content>
          <Content.Header title="场景切换">
            <Radio.Group
              value={theme}
              onChange={value => setTheme(value)}
              layout="inline"
            >
              <Radio name="error">报错</Radio>
              <Radio name="open">开通</Radio>
              <Radio name="arrears">欠费</Radio>
              <Radio name="permission">权限</Radio>
            </Radio.Group>
          </Content.Header>
          <Content.Body>
            <Card full>
              <Blank
                theme={theme}
                description="提供什么服务，达到什么目的，文字不超过两行。提供什么服务，达到什么目的，文字不超过两行"
                operation={
                  <>
                    <Button type="primary">前往访问管理</Button>
                    <Button>了解访问管理</Button>
                  </>
                }
                extra={
                  <>
                    <ExternalLink>查看接入流程</ExternalLink>
                    <ExternalLink>查看计价</ExternalLink>
                  </>
                }
              />
            </Card>
          </Content.Body>
        </Content>
      </Body>
    </Layout>
  );
}

export default function Demo() {
  return (
    <section
      style={{
        height: 540,
        border: "1px solid #ddd",
      }}
    >
      <BlankExample />
    </section>
  );
}
