import { useCallback } from 'react';
import cx from "../../../../utils/css/cx.js";
import choose from '../choose.module.scss';
const cls = cx.merge(choose);
const NativeSelect = function NativeSelect(props) {
  const {
    placeholder,
    options,
    onSelect,
    size,
    value,
    shadow,
    track
  } = props;
  const onChange = useCallback(e => {
    const {
      value: targetValue
    } = e.target;
    if (!targetValue) return;
    onSelect(targetValue);
  }, [onSelect, track]);
  return <div>
      <select className={cls('choose', size, `shadow-${shadow}`)} value={value} onChange={onChange}>
        <option value="">{placeholder}</option>
        {options.map(option => <option key={option.value} value={option.value}>
            {option.label}
          </option>)}
      </select>
    </div>;
};
export default NativeSelect;