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

const { Body, Content } = Layout;

function BlankCustomExample() {
  return (
    <Layout>
      <Body>
        <Content>
          <Content.Body>
            <Blank
              title="CVM"
              image={{
                background:
                  "https://imgcache.qq.com/qcloud/tcloud_dtc/static/tc_console/114b4d79-fdd8-4c8c-8771-418a8fa81bbb.svg",
                logo:
                  "https://imgcache.qq.com/qcloud/tcloud_dtc/static/tc_console_product/3ad6629b-8cf5-42ee-8a7f-4e3802768638.svg",
              }}
              operation={<Button type="primary">前往选购</Button>}
              extra={
                <>
                  <ExternalLink>查看接入流程</ExternalLink>
                  <ExternalLink>查看计价</ExternalLink>
                </>
              }
              bottom={[
                <>
                  <Icon type="notice-blue" />
                  <a>全民上云季，云服务器3折起</a>
                </>,
                <>
                  <Icon type="notice-blue" />
                  <a>AMD 1核 1G 服务器 15元/月，拼团最高获赠40个月时长</a>
                </>,
              ]}
            >
              <Alert type="info">信息提示</Alert>
              <Blank.Steps
                steps={["步骤一内容；", "步骤二内容内容；", "步骤三内容"]}
              />
              <List type="bullet">
                <List.Item>
                  操作提示一操作提示一操作提示一操作提示一操作提示一
                </List.Item>
                <List.Item>
                  操作提示二操作提示二操作提示二操作提示二操作提示二提示二{" "}
                  <ExternalLink>操作提示二</ExternalLink>
                </List.Item>
                <List.Item>
                  更多问题，请 <ExternalLink>联系我们</ExternalLink>
                </List.Item>
              </List>
            </Blank>
          </Content.Body>
        </Content>
      </Body>
    </Layout>
  );
}

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