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

const propTypes = {
  selected: PropTypes.string,
  onChange: PropTypes.func,
};

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

  return (
    <div className="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;
