export const ComboBox = () => {
  const [selectedOptions, setSelected] = useState([options[2]]);

  const onChange = (selectedOptions) => {
    // We should only get back either 0 or 1 options.
    setSelected(selectedOptions);
  };

  const renderCountryOption = (option, searchValue) => {
    return (
      <Fragment>
        <EuiHighlight search={searchValue}>{option.label}</EuiHighlight>
        <br />
        <EuiTextColor color="subdued">
          <small>I am secondary content, I am!</small>
        </EuiTextColor>
      </Fragment>
    );
  };

  let customProps;

  customProps = {
    height: 240,
    renderOption: renderCountryOption,
    listProps: {
      rowHeight: 50,
      showIcons: false,
    },
  };

  return (
    <EuiComboBox
      placeholder="Select a single option"
      singleSelection={{ asPlainText: true }}
      options={options}
      selectedOptions={selectedOptions}
      onChange={onChange}
      isClearable={false}
      compressed
      {...customProps}
    />
  );
};