import { useRef, useEffect } from '@wordpress/element'

function Select({ data = [], disabled = false, id = '', onChange = () => {} }) {
    const selectEl = useRef()

    useEffect(() => {
        new Choices(selectEl.current)
    },[])
    return (
        <select ref={selectEl} disabled={ disabled? true : false } name={id} onChange={onChange}>
            { data.map( val => (
                <option value={val.value} selected={ val.selected? true : false }>{val.label}</option>
            )) }
        </select>
    )
}

export default Select