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

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

  return (
    <Segment
      value={value.toString()}
      onChange={value => setValue(parseInt(value, 10))}
      options={[
        { text: "1个月", value: "1" },
        { text: "2个月", value: "2" },
        {
          text: (
            <>
              3个月
              <Badge theme="warning" dark>
                8.8折
              </Badge>
            </>
          ),
          value: "3",
        },
        { text: "半年", value: "6" },
      ]}
    />
  );
}