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

export default function RadioExample() {
  const [gender, setGender] = useState(null);
  const [paymode, setPaymode] = useState(null);

  return (
    <>
      <section>
        <Radio.Group value={gender} onChange={value => setGender(value)}>
          <Radio name="male">男性</Radio>
          <Radio name="female">女性</Radio>
        </Radio.Group>
      </section>

      <hr />
      <section>如果选项超过三个，应该使用垂直分布来提高可读性：</section>
      <section>
        <Radio.Group
          value={paymode}
          onChange={value => setPaymode(value)}
          layout="column"
        >
          <Radio name="prepaid">预付费</Radio>
          <Radio name="billing">后付费</Radio>
          <Radio name="subscription">订阅模式</Radio>
          <Radio name="friend" disabled>
            朋友代付
          </Radio>
        </Radio.Group>
      </section>
    </>
  );
}