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

/** FAB (Floating Action Button) */
export const Fab = (props) => {
  const { icon, label, actions = [], position = "bottom-6 right-6", ...rest } = props;

  return $html(
    "div",
    {
      ...rest,
      class: () => `fab fixed ${val(position)} flex flex-col-reverse items-end gap-3 z-[100] ${
        props.class || ""
      }`,
    },
    [
      // Botón principal
      $html(
        "div",
        {
          tabindex: 0,
          role: "button",
          class: "btn btn-lg btn-circle btn-primary shadow-2xl",
        },
        [
          icon ? (typeof icon === "function" ? icon() : icon) : null, 
          !icon && label ? label : null
        ],
      ),

      // Acciones secundarias (se despliegan hacia arriba)
      ...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 ? (typeof act.icon === "function" ? act.icon() : act.icon) : act.text || ""],
          ),
        ]),
      ),
    ],
  );
};