// components/Select.js
import { $html, $for } from "../sigpro.js";
import { val, ui } from "../core/utils.js";

/**
 * Select component
 * 
 * daisyUI classes used:
 * - select, select-bordered, select-primary, select-secondary
 * - select-accent, select-info, select-success, select-warning, select-error
 * - select-xs, select-sm, select-md, select-lg
 * - fieldset-label, flex, flex-col, gap-1, w-full
 */
export const Select = (props) => {
  const { class: className, label, items, value, ...rest } = props;

  const selectEl = $html(
    "select",
    {
      ...rest,
      class: ui('select select-bordered w-full', className),
      value: value
    },
    $for(
      () => val(items) || [],
      (opt) =>
        $html(
          "option",
          {
            value: opt.value,
            $selected: () => String(val(value)) === String(opt.value),
          },
          opt.label,
        ),
      (opt) => opt.value,
    ),
  );

  if (!label) return selectEl;

  return $html("label", { class: "fieldset-label flex flex-col gap-1" }, [
    $html("span", {}, label), 
    selectEl
  ]);
};