// components/Select.js
import { h, each } from "sigpro";

export const Select = (props) => {
  const { items, placeholder, placeholderDisabled = true, keyFn, children, ...rest } = props;

  if (children !== undefined) {
    return h("select", { ...rest, class: `select ${rest.class ?? ''}` }, children);
  }

  const placeholderOption = placeholder
    ? h("option", { disabled: placeholderDisabled, selected: true }, placeholder)
    : null;

  const dynamicOptions = each(
    () => [...(typeof items === "function" ? items() : items || [])],
    (item) => {
      const value = typeof item === "string" ? item : item.value;
      const label = typeof item === "string" ? item : item.label;
      return h("option", { value }, label);
    }
  );

  const options = placeholderOption
    ? [placeholderOption, dynamicOptions]
    : dynamicOptions;

  return h("select", { ...rest, class: `select ${rest.class ?? ''}` }, options);
};