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

const groups = {
  hn: "华南地区",
  hb: "华北地区",
  hd: "华东地区",
};

const options = [
  { groupKey: "hn", text: "广州", value: "1" },
  { groupKey: "hn", text: "深圳金融", value: "2" },
  { groupKey: "hb", text: "北京", value: "3" },
  { groupKey: "hb", text: "天津", value: "4" },
  { groupKey: "hd", text: "上海", value: "5" },
  { groupKey: "hd", text: "上海金融", value: "6", bubble: "上海金融" },
  {
    groupKey: "hd",
    text: "南京",
    value: "7",
    disabled: true,
    tooltip: "暂不支持",
  },
];

export default function SegmentExample() {
  const [value, setValue] = useState(2);

  return (
    <Segment
      value={value.toString()}
      onChange={value => setValue(parseInt(value, 10))}
      options={options}
      groups={groups}
    />
  );
}