import React from "react";
import _ from "lodash";
import { Multiselect } from "../../";

const items = _.range(30).map(i => {
  return {
    id: i,
    text: `Text ${i}`
  };
});

export default (
  <>
    <div className="d-flex m-5">
      <div className="ml-5">
        <Multiselect
          header="Multi Select without icon"
          btnSize="lg"
          onSubmit={() => {}}
          items={items}
          value={[]}
        />
      </div>
    </div>

    <div className="d-flex m-5">
      <div className="ml-5">
        <Multiselect
          btnSize="sm"
          header="Multi Select with icon"
          onSubmit={() => {}}
          items={items}
          value={[]}
        ></Multiselect>
      </div>
    </div>

    <div className="d-flex m-5">
      <div className="ml-5">
        <Multiselect
          btnSize="sm"
          header="Multi Select with Loading"
          onSearch={() => {}}
          loading
          onSubmit={() => {}}
          value={[]}
          items={items}
        ></Multiselect>
      </div>
    </div>
  </>
);