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

type Props<K extends string, T extends K> = {
    options: Record<K, string | JSX.Element>
    value: T
    setValue?: StateUpdater<K>
}

export const Select = <K extends string, T extends K>({ options, value, setValue }: Props<K, T>) => {
    const optionValues = new Set(Object.keys(options))

    return (
        <div class="input-select">
            <select
                onInput={e => {
                    if (e.target instanceof HTMLSelectElement && optionValues.has(e.target.value)) {
                        setValue?.(e.target.value as K)
                    }
                }}
            >
                {Object.entries<string | JSX.Element>(options).map(([k, v]) => (
                    <option value={k} selected={value === k}>
                        {v}
                    </option>
                ))}
            </select>
            <span class="material-symbols-outlined">expand_more</span>
        </div>
    )
}