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

/** BUTTON */
export const Button = (props, children) => {
  const { badge, badgeClass, tooltip, icon, loading, ...rest } = props;

  const btn = $html(
    "button",
    {
      ...rest,
      // Usamos props.class directamente
      class: joinClass("btn", props.class),
      disabled: () => val(loading) || val(props.disabled),
    },
    [
      () => (val(loading) ? $html("span", { class: "loading loading-spinner" }) : null),
      icon ? $html("span", { class: "mr-1" }, icon) : null,
      children,
    ]
  );

  let out = btn;

  if (badge) {
    out = $html("div", { class: "indicator" }, [
      $html(
        "span",
        { class: joinClass("indicator-item badge", badgeClass || "badge-secondary") },
        badge
      ),
      out,
    ]);
  }

  return tooltip 
    ? $html("div", { class: "tooltip", "data-tip": tooltip }, out) 
    : out;
};