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

export const Select = (props) => {
  const { ui: uiProps, class: className, label, options, value, ...rest } = props;

  const dynamicClasses = [
    ui('select', uiProps),
    className
  ].filter(Boolean).join(' ');

  const selectClasses = joinClass("select select-bordered w-full", dynamicClasses);

  const selectEl = $html(
    "select",
    {
      ...rest,
      class: selectClasses,
      value: value
    },
    $for(
      () => val(options) || [],
      (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
  ]);
};