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

/**
 * Fab (Floating Action Button) component
 * 
 * daisyUI classes used:
 * - btn, btn-lg, btn-circle, btn-primary
 * - shadow-2xl, shadow-lg
 * - badge, badge-ghost, shadow-sm, whitespace-nowrap
 * - absolute, flex, flex-col-reverse, items-end, gap-3
 * - z-100, transition-all, duration-300
 * - bottom-6, right-6, top-6, left-6
 */
export const Fab = (props) => {
  const { class: className, icon, label, actions = [], position = "bottom-6 right-6", ...rest } = props;

  return $html(
    "div",
    {
      ...rest,
      class: ui(`fab absolute ${position} flex flex-col-reverse items-end gap-3 z-[100]`, className),
    },
    [
      $html(
        "div",
        {
          tabindex: 0,
          role: "button",
          class: "btn btn-lg btn-circle btn-primary shadow-2xl",
        },
        [
          icon ? getIcon(icon) : null, 
          !icon && label ? label : null
        ],
      ),

      ...val(actions).map((act) =>
        $html("div", { class: "flex items-center gap-3 transition-all duration-300" }, [
          act.label ? $html("span", { class: "badge badge-ghost shadow-sm whitespace-nowrap" }, act.label) : null,
          $html(
            "button",
            {
              type: "button",
              class: `btn btn-circle shadow-lg ${act.class || ""}`,
              onclick: (e) => {
                e.stopPropagation();
                act.onclick?.(e);
              },
            },
            [act.icon ? getIcon(act.icon) : act.text || ""],
          ),
        ]),
      ),
    ],
  );
};