import React from "react";
import { Select as BaseSelect } from "baseui/select";

export interface SelectProps {
  clearable?: boolean;
  value: { id: string; label: string }[];
  onChange: (value: any) => void;
  options: { id: string; label: string }[];
  labelKey?: string;
  valueKey?: string;
  multi?: boolean;
  size?: any;
  placeholder?: string;
}

/**
 * This is the `<Select>` component <br />
 * Use this to gather options/mutiple option data from the user
 */
const Select: React.FC<SelectProps> = (props) => {
  const { value, onChange } = props;
  return (
    <BaseSelect
      {...props}
      value={value}
      onChange={onChange}
      overrides={{
        ControlContainer: {
          style: () => ({
            backgroundColor: "white",
            borderRadius: "4px",
            borderColor: "#b3b5bd",
          }),
        },
      }}
    />
  );
};

export default Select;