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

export const Select = (props, children) => {
  children === undefined && (children = props, props = {});
  return h("select", { ...props, class: `select ${props.class ?? ''}` }, children);
};

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

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

  return placeholderOption ? [placeholderOption, dynamicOptions] : dynamicOptions;
};

export const SelectLabel = (props, children) => h("label", { class: `${props.float ? 'floating-label' : 'select'}` },
  [
    h("span", { class: props.float ? '' : 'label opacity-50' }, props.label),
    props.left ?? null,
    h("select", { ...props, class: `${props.float ? 'select' : ''} ${props.class ?? ''}` }, children),
    props.right ?? null
  ]
);