import { StateUpdater } from 'preact/hooks'
import { JSX } from 'preact/jsx-runtime'

type Props = {
    options: Record<string, string>
    value: string
    setValue?: StateUpdater<string>
}

export const Select = ({ options, value, setValue }: Props) => (
    <div class="input-select">
        <select
            onInput={e => setValue?.(e.target instanceof HTMLSelectElement ? e.target.value : '')}
        >
            {Object.entries(options).map(([k, v]) => (
                <option value={k} selected={value === k}>
                    {v}
                </option>
            ))}
        </select>
        <span class="material-symbols-outlined">expand_more</span>
    </div>
)