import classNames from 'classnames';
import React, { PropTypes } from 'react';

import { KD_COUNTRY } from '../../constants';
import { typeOptions } from './options';

function TypeSelector({ selected, onChange, tiny }) {
  return (
    <select
      className={classNames({ 'c-select-tiny': tiny })}
      onChange={(event) => { onChange(event.target.value); }}
      value={selected}
    >
      {
        typeOptions.map(option => (
          <option value={option.value} key={option.value}>{option.label}</option>
        ))
      }
    </select>
  );
}

TypeSelector.propTypes = {
  selected: PropTypes.string,
  onChange: PropTypes.func,
  tiny: PropTypes.bool,
};
TypeSelector.defaultProps = {
  selected: KD_COUNTRY,
  tiny: true,
};

export default TypeSelector;
