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

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

  return (
    <>
      <Segment
        rimless={rimless}
        value={value.toString()}
        onChange={value => setValue(parseInt(value, 10))}
        options={[
          { text: "1个月", value: "1" },
          { text: "2个月", value: "2" },
          { text: "3个月", value: "3" },
          {
            text: (
              <>
                半年
                <Badge theme="warning" dark>
                  8.8折
                </Badge>
              </>
            ),
            value: "6",
          },
          { text: "1年", value: "12" },
          { text: "2年", value: "24", bubble: "2 年享九折优惠" },
          {
            text: "3年",
            value: "36",
            disabled: true,
            tooltip: "暂时不支持购买 3 年",
          },
        ]}
      />
      <section>
        无边框样式：
        <Switch value={rimless} onChange={setRimless} />
      </section>
    </>
  );
}