import { h } from "@stencil/core";
import { configStore } from "../../store/store";
export const ZSelectInput = ({ label, placeholder = '', value, options, onChange }) => {
    const theme = configStore.get('theme');
    return (h("div", { class: "mb-4", "data-theme": theme }, h("label", { class: "z-select-input-label text-surface" }, label), h("select", { class: "z-input border-divider bg-background text-surface",
        // value={value}
        onInput: (e) => {
            if (onChange)
                onChange(e.target.value);
        } }, h("option", { value: "", disabled: true, hidden: true }, placeholder), options.map(opt => (h("option", { value: opt.value, selected: opt.value === value }, opt.label))))));
};
