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

export default function CardExample() {
  const [placement, setPlacement] = useState("top");

  const tabs = [
    { id: "1", label: "Tab 1" },
    { id: "2", label: "Tab 2" },
    { id: "3", label: "Tab 3" },
  ];

  return (
    <>
      <section>
        <Switch
          value={placement === "left"}
          onChange={value => setPlacement(value ? "left" : "top")}
        >
          垂直布局
        </Switch>
      </section>
      <div className="example-stage">
        <Card className="demo-card">
          <Tabs
            tabs={tabs}
            // @ts-ignore
            placement={placement}
          >
            <TabPanel id="1">
              <Card.Body>Tab 1</Card.Body>
            </TabPanel>
            <TabPanel id="2">
              <Card.Body>Tab 2</Card.Body>
            </TabPanel>
            <TabPanel id="3">
              <Card.Body>Tab 3</Card.Body>
            </TabPanel>
          </Tabs>
        </Card>
      </div>
    </>
  );
}

/*
.demo-card {
  line-height: 0;

  .tea-tabs__tabitem {
    height: 50px;
    line-height: 50px;

    .tea-tabs__tab {
      min-width: 100px;
      text-align: center;
    }
  }

  .tea-tabs__backward, .tea-tabs__forward {
    height: 50px;
  }

  .tea-tabs--vertical {
    .tea-tabs__tab {
      text-align: right;
    }
  }
}
*/