// components/Select.js
import { Tag, For } from "sigpro";

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

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

  const dynamicOptions = For(
    () => [...(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 Tag("option", { value: val }, label);
    },
    props.keyFn || ((item) => (typeof item === "string" ? item : item.value))
  );

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