import React from "react";
import {
  Layout,
  Card,
  ExternalLink,
  RegionSelect,
  RegionPanel,
  RegionOption,
} from "@tencent/tea-component";

const { Body, Content } = Layout;

export default function LayoutContentExample() {
  return (
    <Layout className="demo-layout">
      <Body>
        <Content>
          <Content.Header
            showBackButton
            onBackButtonClick={console.log}
            title="内容标题"
            operation={<ExternalLink weak>内容帮助</ExternalLink>}
          >
            <RegionSelect>
              <RegionPanel>
                <RegionPanel.Head>
                  <RegionOption value="all" num={1108}>
                    全部地域
                  </RegionOption>
                </RegionPanel.Head>
                <RegionPanel.Column>
                  <RegionPanel.Group name="中国">
                    <RegionOption value="gz" num={20}>
                      广州
                    </RegionOption>
                    <RegionOption value="sh" num={20} dot>
                      上海
                    </RegionOption>
                    <RegionOption value="hk" num={20}>
                      香港
                    </RegionOption>
                  </RegionPanel.Group>
                </RegionPanel.Column>
              </RegionPanel>
            </RegionSelect>
          </Content.Header>
          <Content.Body>
            {/* 内容区域一般使用 Card 组件显示内容 */}
            <Card>
              <Card.Body>内容卡片</Card.Body>
            </Card>
          </Content.Body>
          <Content.Footer>
            <div className="demo-layout-footer">
              (可选项)自定义页脚
              <br />
              京公网安备 11010802017518 粤B2-20090059-1
            </div>
          </Content.Footer>
        </Content>
      </Body>
    </Layout>
  );
}
