import { useRef } from 'preact/hooks'
import { Icon } from './Icon.jsx'

export const ComboBox = ({ selected, options }) => {
    const selectRef = useRef()

    return (
        <div class="input-combo" onClick={() => selectRef.current?.click()}>
            <select ref={selectRef}>
                {options.map(({ label, value }) => (
                    <option value={value} selected={value === selected}>
                        {label}
                    </option>
                ))}
            </select>
            <Icon name="expand_more" />
        </div>
    )
}