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

const propTypes = {
  theme: PropTypes.oneOfType([
    PropTypes.object,
    PropTypes.func,
  ]).isRequired,
  selected: PropTypes.string,
  onChange: PropTypes.func,
};

function HourSelect({ selected, onChange, theme }) {
  const hours = hourOptions();

  return (
    <div className={classNames('c-base-select', theme['c-base-select'])}>
      <select onChange={(e) => onChange(e.target.value)} value={selected}>
        {
          hours.map(hour => (
            <option key={hour} value={hour}>
              {hour}
            </option>
          ))
        }
      </select>
    </div>
  );
}

HourSelect.propTypes = propTypes;

export default HourSelect;
