import { jsx as ___EmotionJSX } from "@emotion/core";
import React from 'react';
import PropTypes from 'prop-types';
import ChevronIcon from '../../svgs/icons/chevron-icon.svg';
import { DropdownContainer, dropdownInputStyle, IconContainer } from './style';

var MobileDropdown = function MobileDropdown(_ref) {
  var textAlign = _ref.textAlign,
      value = _ref.value,
      onSelectChange = _ref.onSelectChange,
      options = _ref.options;
  return ___EmotionJSX(DropdownContainer, {
    textAlign: textAlign
  }, ___EmotionJSX("select", {
    css: dropdownInputStyle({
      textAlign: textAlign
    }),
    value: value || '',
    onChange: onSelectChange
  }, options.map(function (option) {
    return ___EmotionJSX("option", {
      key: option.value,
      value: option.value,
      disabled: option.disabled
    }, option.label);
  })), ___EmotionJSX(IconContainer, null, ___EmotionJSX(ChevronIcon, {
    width: 10,
    height: 10
  })));
};

MobileDropdown.defaultProps = {
  value: null,
  options: [{
    value: null,
    label: ''
  }],
  textAlign: 'left',
  onSelectChange: function onSelectChange() {}
};
MobileDropdown.propTypes = {
  // eslint-disable-next-line react/forbid-prop-types
  value: PropTypes.any,
  options: PropTypes.arrayOf(PropTypes.shape({
    // eslint-disable-next-line react/forbid-prop-types
    value: PropTypes.any,
    label: PropTypes.string,
    disabled: PropTypes.bool
  })),
  textAlign: PropTypes.oneOf(['left', 'center']),
  onSelectChange: PropTypes.func
};
export default MobileDropdown;