/**
 * TEAM: frontend_infra
 * @flow
 */

import type {Node} from "react";
import {useState} from "react";
import SearchableMultiselectFilter from "../SearchableMultiselectFilter";
import {characters} from "../../tools/demo";

/**
 * @title Basic Searchable Multiselect Filter Usage
 * @description Searchable Multiselect Filter can be used to filter on multiple options from a list
 */
export default function SearchableMultiselectFilterBasicUsage(): Node {
  const [value, setValue] = useState([]);
  const options = characters.map(character => ({
    label: `${character.name} - ${character.team}`,
    value: character,
  }));

  return (
    <SearchableMultiselectFilter
      label="Favorite Starwars Character"
      value={value}
      options={options}
      onChange={newValue => setValue(newValue)}
    />
  );
}