import React from 'react';
import PropTypes from 'prop-types';
import './Selectone.less';

class SelectOne extends React.PureComponent {
    static propTypes = {
        list: PropTypes.arrayOf(
            PropTypes.shape({
                name: PropTypes.string,
                color: PropTypes.string,
                id: PropTypes.string,
            }),
        ),
        curId: PropTypes.string,
        onChange: PropTypes.func,
    };

    render() {
        const { list, curId, onChange } = this.props;
        return (
            <select onChange={e => onChange(e.target.value)} value={curId}>
                {list.map(p => {
                    const { id, name, color } = p;
                    return (
                        <option style={{ color }} value={id} key={id}>
                            {name}
                        </option>
                    );
                })}
            </select>
        );
    }
}
export default SelectOne;