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

/**
 * Button component
 * 
 * daisyUI classes used:
 * - btn, btn-primary, btn-secondary, btn-accent, btn-ghost
 * - btn-info, btn-success, btn-warning, btn-error, btn-neutral
 * - btn-xs, btn-sm, btn-md, btn-lg, btn-xl
 * - btn-outline, btn-soft, btn-dash, btn-link
 * - btn-circle, btn-square, btn-wide, btn-block
 * - btn-active, btn-disabled
 */
export const Button = (props, children) => {
  const { class: className, loading, icon, ...rest } = props;

  const iconEl = getIcon(icon);

  return $html("button", {
    ...rest,
    class: ui('btn', className),
    disabled: () => val(loading) || val(props.disabled),
  }, () => [
    val(loading) && $html("span", { class: "loading loading-spinner" }),
    iconEl,
    children
  ].filter(Boolean));
};