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

/** SELECT */
export const Select = (props) => {
  const { label, options, value, ...rest } = props;

  const selectEl = $html(
    "select",
    {
      ...rest,
      class: joinClass("select select-bordered w-full", props.class),
      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
  ]);
};