import { jsx as f } from "react/jsx-runtime";
import { useHover as N } from "./index-use-hover.js";
import { classNames as R } from "./index-classNames.js";
import { Icon as V } from "./index-Icon.js";
import { Popover as $ } from "./index-Popover.js";
import { useRef as j, useState as z, useEffect as A } from "react";
import { a as d } from "./index-react-spring_web.modern.js";
import v from "./index-IconButton.module.scss.js";
import { useSpring as b } from "./index-react-spring_core.modern.js";
const K = (h) => {
  const {
    isActive: o,
    onHover: n,
    onClick: C,
    icon: S,
    message: y,
    isDisabled: e,
    isSpinning: B
  } = h, g = j(null), a = N(g), r = (s, H = 1) => `rgb(from var(${s}) r g b / ${H})`, m = r("--fn-fg-cta"), t = r("--fn-fg-light"), p = r("--fn-bg"), u = r("--fn-bg-hov-p-gl", 0.32), [I, k] = z(o ? m : t);
  A(() => {
    n == null || n(a);
  }, [a, n]);
  let i = p, c = t, l = "pointer";
  o ? (i = u, c = m, l = e ? "not-allowed" : "pointer") : e ? (i = p, c = t, l = "not-allowed") : (i = a ? u : p, c = t, l = "pointer");
  const x = b({
    backgroundColor: i,
    config: {
      tension: 200,
      friction: 20
    }
  }), w = b({
    color: o ? m : c,
    config: {
      tension: 200,
      friction: 20
    },
    onChange: (s) => {
      s.value.color && k(s.value.color);
    }
  });
  return f($, {
    message: y,
    children: f(d.div, {
      ref: g,
      style: {
        ...x,
        cursor: l
      },
      className: R(v.btn, o && v.active),
      onClick: e ? void 0 : C,
      role: "button",
      tabIndex: e ? -1 : 0,
      children: f(d.span, {
        style: w,
        children: f(V, {
          forceSize: 16,
          color: I,
          spin: B,
          children: S
        })
      })
    })
  });
};
export {
  K as IconButton
};
