import React, { useState } from "react";
import { Tabs, TabPanel, Switch } from "@tencent/tea-component";

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

  const verticalSwitch = useSwitch();

  return (
    <>
      <section>
        <Tabs tabs={tabs} placement={verticalSwitch.value ? "left" : "top"}>
          <p>当前选项卡：</p>
          <TabPanel id="basic">基本信息</TabPanel>
          <TabPanel id="network">弹性网卡</TabPanel>
          <TabPanel id="monitor">基本信息</TabPanel>
          <TabPanel id="sg">安全组</TabPanel>
          <TabPanel id="oplog">操作日志</TabPanel>
        </Tabs>
      </section>
      <hr />
      <section>
        <Switch {...verticalSwitch}>垂直布局</Switch>
      </section>
    </>
  );
}

function useSwitch(defaultChecked = false) {
  const [value, onChange] = useState(defaultChecked);
  return { value, onChange: value => onChange(value) };
}