import { ForwardedRef, forwardRef } from 'react';
import ReactSelect, { StylesConfig } from 'react-select';

export const selectDefaultStyles: StylesConfig = {
    control(base, props) {
        return {
            ...base,
            border: props.isFocused ? '2px solid #3489E4' : '2px solid #D8D8D8',
            borderRadius: '8px',
            boxShadow: '0',
            minWidth: 200,
        };
    },
    valueContainer(base, props) {
        return {
            ...base,
            // border: '1px solid #D8D8D8',
        };
    },
    indicatorSeparator(base, props) {
        return {
            display: 'none',
        };
    },
};

const BaseReactSelect = (props: any, ref: ForwardedRef<HTMLSelectElement>) => {
    return <ReactSelect styles={selectDefaultStyles} {...props} ref={ref} />;
};

export default forwardRef(BaseReactSelect);