import React from 'react';
import { Dropdown, Icon } from 'UI';
import stl from './DropdownPlain.module.css';

interface Props {
  name?: string;
  options: any[];
  onChange: (e, { name, value }) => void;
  icon?: string;
  direction?: string;
  value?: any;
  multiple?: boolean;
}

export default function DropdownPlain(props: Props) {
  const {
    name = 'sort',
    value,
    options,
    icon = 'chevron-down',
    direction = 'right',
    multiple = false,
  } = props;
  return (
    <div>
      <Dropdown
        value={value}
        name={name}
        className={stl.dropdown}
        direction={direction}
        options={options}
        onChange={props.onChange}
        // floating
        scrolling
        multiple={multiple}
        selectOnBlur={false}
        // defaultValue={ value }
        icon={
          icon ? (
            <Icon
              name="chevron-down"
              color="gray-dark"
              size="14"
              className={stl.dropdownIcon}
            />
          ) : null
        }
      />
    </div>
  );
}