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

export default function InputAdornmentExample() {
  const protocolSelect = (
    <Select
      options={["http://", "https://"].map(value => ({ value }))}
      defaultValue="http://"
      style={{ width: "auto" }}
    />
  );

  const tldSelect = (
    <Select
      options={[".com", ".cn", ".net", ".org"].map(value => ({ value }))}
      defaultValue=".cn"
      style={{ width: "auto" }}
    />
  );

  const domainSelect = (
    <Select
      options={["tencent", "qq", "cloud.tencent"].map(value => ({ value }))}
      defaultValue="tencent"
      style={{ width: "auto" }}
    />
  );

  return (
    <>
      <section>
        <InputAdornment before={protocolSelect}>
          <Input />
        </InputAdornment>
      </section>

      <section>
        <InputAdornment after={tldSelect}>
          <Input />
        </InputAdornment>
      </section>

      <section>
        <InputAdornment before={protocolSelect} after={tldSelect}>
          <Input />
        </InputAdornment>
      </section>

      <section>
        <InputAdornment before={protocolSelect} after={tldSelect}>
          {domainSelect}
        </InputAdornment>
      </section>
    </>
  );
}