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

const options = Array.from({ length: 10 }).map((_, i) => ({
  value: `${i}`,
  text: `Tea Component | Select | Option - ${i}`,
}));

export default function SelectExample() {
  const [value, setValue] = useState(null);

  return (
    <Form>
      <Form.Item label="默认宽度" message="选项内容较长时不建议使用默认宽度">
        <Select
          size="m"
          appearance="button"
          value={value}
          onChange={value => setValue(value)}
          options={options}
        />
      </Form.Item>
      <Form.Item label="设置宽度" message="设置可容纳较长内容的固定宽度">
        <Select
          size="m"
          appearance="button"
          listWidth={360}
          value={value}
          onChange={value => setValue(value)}
          options={options}
        />
      </Form.Item>
      <Form.Item label="按钮同宽" message="视情况启用">
        <Select
          size="m"
          appearance="button"
          matchButtonWidth
          value={value}
          onChange={value => setValue(value)}
          options={options}
        />
      </Form.Item>
      <Form.Item label="禁用虚拟滚动" message="此时列表可自适应宽度">
        <Select
          virtual={false}
          size="m"
          appearance="button"
          value={value}
          onChange={value => setValue(value)}
          options={options}
        />
      </Form.Item>
    </Form>
  );
}