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

export default function TabsExample() {
  const [tabs, setTabs] = useState([
    { id: "1", label: "Tab-1", onClose: remove },
    { id: "2", label: "Tab-2", onClose: remove },
    { id: "3", label: "Tab-3", onClose: remove },
  ]);

  function add() {
    setTabs(tabs => [
      ...tabs,
      { id: String(Date.now()), label: "New Tab", onClose: remove },
    ]);
  }

  function remove({ id }) {
    setTabs(tabs => tabs.filter(tab => tab.id !== id));
  }

  return (
    <Tabs tabs={tabs} addon={<Button type="icon" icon="plus" onClick={add} />}>
      {tabs.map(tab => (
        <TabPanel id={tab.id} key={tab.id}>
          {tab.label}
        </TabPanel>
      ))}
    </Tabs>
  );
}