import React from "react";
import {
  Layout,
  Card,
  Text,
  ExternalLink,
  Tabs,
  TabPanel,
} from "@tencent/tea-component";

const { Body, Content } = Layout;

export default function LayoutContentWithTabsExample() {
  const tabs = [
    { id: "basic", label: "基本信息" },
    { id: "network", label: "弹性网卡" },
    { id: "monitor", label: "监控信息" },
    { id: "sg", label: "安全组", disabled: true },
    { id: "oplog", label: "操作日志" },
  ];

  return (
    <Layout className="demo-layout">
      <Body>
        <Content>
          <Content.Header
            showBackButton
            onBackButtonClick={console.log}
            title="内容标题"
            subtitle={
              <>
                说明文字 <Text theme="label">带颜色说明文字</Text>
              </>
            }
            operation={<ExternalLink weak>内容帮助</ExternalLink>}
          />
          <Content.Body>
            <Tabs ceiling animated={false} tabs={tabs}>
              <TabPanel id="basic">
                <Card>
                  <Card.Body>基本信息</Card.Body>
                </Card>
              </TabPanel>
              <TabPanel id="network">
                <Card>
                  <Card.Body>弹性网卡</Card.Body>
                </Card>
              </TabPanel>
              <TabPanel id="monitor">
                <Card>
                  <Card.Body>监控信息</Card.Body>
                </Card>
              </TabPanel>
              <TabPanel id="oplog">
                <Card>
                  <Card.Body>操作日志</Card.Body>
                </Card>
              </TabPanel>
            </Tabs>
          </Content.Body>
        </Content>
      </Body>
    </Layout>
  );
}
