import * as React from "react";
import { StatefulSelect } from "baseui/select";
import { SIZE } from "baseui/input";

export default function Example() {
  return (
    <React.Fragment>
      <StatefulSelect
        size={SIZE.compact}
        options={[
          { id: "AliceBlue", color: "#F0F8FF" },
          { id: "AntiqueWhite", color: "#FAEBD7" },
          { id: "Aqua", color: "#00FFFF" },
          { id: "Aquamarine", color: "#7FFFD4" },
          { id: "Azure", color: "#F0FFFF" },
          { id: "Beige", color: "#F5F5DC" },
        ]}
        labelKey="id"
        valueKey="color"
        onChange={(event) => console.log(event)}
      />
      <br />
      <StatefulSelect
        options={[
          { id: "AliceBlue", color: "#F0F8FF" },
          { id: "AntiqueWhite", color: "#FAEBD7" },
          { id: "Aqua", color: "#00FFFF" },
          { id: "Aquamarine", color: "#7FFFD4" },
          { id: "Azure", color: "#F0FFFF" },
          { id: "Beige", color: "#F5F5DC" },
        ]}
        labelKey="id"
        valueKey="color"
        onChange={(event) => console.log(event)}
      />
      <br />
      <StatefulSelect
        size={SIZE.large}
        options={[
          { id: "AliceBlue", color: "#F0F8FF" },
          { id: "AntiqueWhite", color: "#FAEBD7" },
          { id: "Aqua", color: "#00FFFF" },
          { id: "Aquamarine", color: "#7FFFD4" },
          { id: "Azure", color: "#F0FFFF" },
          { id: "Beige", color: "#F5F5DC" },
        ]}
        labelKey="id"
        valueKey="color"
        onChange={(event) => console.log(event)}
      />
    </React.Fragment>
  );
}