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

const options = [
  {
    value: "strawberry",
    text: "草莓",
    tooltip: "甜甜甜",
  },
  { value: "apple", text: "苹果", tooltip: "每日一苹果，医生远离我" },
  { value: "orange", text: "橙子", tooltip: "丰富 VC 含量" },
  { value: "durian", text: "榴莲", disabled: true, tooltip: "榴莲已售罄" },
];

export default function SelectExample() {
  const [favorite, setFavorite] = useState(null);

  return (
    <Form>
      <Form.Item label="默认样式">
        <Select
          appearance="default"
          options={options}
          value={favorite}
          onChange={value => setFavorite(value)}
          placeholder="请选择你最爱的水果"
        />
      </Form.Item>
      <Form.Item label="按钮样式">
        <Select
          appearance="button"
          options={options}
          value={favorite}
          onChange={value => setFavorite(value)}
          placeholder="请选择你最爱的水果"
        />
      </Form.Item>
      <Form.Item label="链接样式">
        <Select
          appearance="link"
          options={options}
          value={favorite}
          onChange={value => setFavorite(value)}
          placeholder="请选择你最爱的水果"
        />
      </Form.Item>
      <Form.Item label="筛选样式">
        <Select
          appearance="filter"
          options={options}
          value={favorite}
          onChange={value => setFavorite(value)}
          placeholder="请选择你最爱的水果"
        />
      </Form.Item>
      <Form.Item label="自定义">
        <Select
          appearance="pure"
          options={options}
          value={favorite}
          onChange={value => setFavorite(value)}
          button={<Button type="icon" icon="more" />}
        />
      </Form.Item>
    </Form>
  );
}