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

/** DROPDOWN */
export const Dropdown = (props, children) => {
  const { label, icon, ...rest } = props;

  return $html(
    "div",
    {
      ...rest,
      class: () => `dropdown ${val(props.class) || props.class || ""}`,
    },
    [
      $html(
        "div",
        {
          tabindex: 0,
          role: "button",
          class: "btn m-1 flex items-center gap-2",
        },
        [
          icon ? (typeof icon === "function" ? icon() : icon) : null, 
          label ? (typeof label === "function" ? label() : label) : null
        ],
      ),
      $html(
        "ul",
        {
          tabindex: 0,
          class: "dropdown-content z-[50] menu p-2 shadow bg-base-100 rounded-box min-w-max border border-base-300",
        },
        [typeof children === "function" ? children() : children],
      ),
    ],
  );
};