import { jsxs as f, jsx as l } from "react/jsx-runtime";
import { useRef as C } from "react";
import { motion as y } from "motion/react";
import u from "../../utils/classNames.js";
import v from "../../hooks/useHover.js";
const z = (m) => {
  const {
    headline: x,
    animated: s,
    labelUp: t,
    labelDown: a,
    labelPosition: r = "bottom",
    size: e = "md",
    colorFillUp: p = "",
    colorFillDown: d = "",
    colorHoverUp: h = "primary",
    colorHoverDown: i = "primary",
    onVoteUp: o = () => {
    },
    onVoteDown: b = () => {
    },
    itemClassName: n,
    ...c
  } = m, g = u(
    !!t || !!a ? "display-grid grid-cols-2" : "display-flex",
    "gap-15",
    "padding-top-5",
    "user-select-none"
  );
  return /* @__PURE__ */ f("div", { ...c, className: g, children: [
    /* @__PURE__ */ l(
      N,
      {
        size: e,
        fillColor: d,
        hoverColor: i,
        animated: s,
        iconName: "thumbs-down",
        text: a,
        labelPosition: r,
        onClick: b,
        className: n
      }
    ),
    /* @__PURE__ */ l(
      N,
      {
        size: e,
        fillColor: p,
        hoverColor: h,
        animated: s,
        iconName: "thumbs-up",
        text: t,
        labelPosition: r,
        onClick: o,
        className: n
      }
    )
  ] });
}, N = (m) => {
  const {
    size: x,
    text: s,
    iconName: t,
    onClick: a,
    fillColor: r,
    hoverColor: e,
    animated: p = !1,
    labelPosition: d = "bottom",
    className: h
  } = m, i = C(null), o = v(i), b = u(
    x === "sm" ? "width-40" : "width-50",
    "aspect-ratio-1",
    "border rounded-circle",
    r ? `bg-${r} text-color-white` : "bg-lightest",
    o ? `border-color-${e} text-color-${e}` : "border-color-lightest",
    "display-grid place-items-center",
    "text-size-14"
  ), n = u(
    "display-flex",
    "gap-10",
    d === "bottom" ? "flex-column" : "",
    "align-items-center",
    "text-center",
    "cursor-pointer",
    h
  ), c = t.includes("up");
  return /* @__PURE__ */ f("div", { ref: i, className: n, onClick: a, children: [
    /* @__PURE__ */ l("div", { className: b, children: /* @__PURE__ */ l(
      y.span,
      {
        initial: { y: 0, rotate: 0 },
        animate: p && o ? { y: [0, c ? -3 : 3, 0], rotate: [0, c ? -10 : 10, 0] } : { y: 0 },
        transition: {
          duration: 0.6,
          repeat: o ? Number.POSITIVE_INFINITY : 0,
          repeatType: "loop"
        },
        className: `rioglyph rioglyph-${t} text-size-200pct`
      }
    ) }),
    /* @__PURE__ */ l(
      "div",
      {
        className: `text-wrap-balance line-height-125rel text-medium ${o ? `text-color-${e}` : "text-color-darker"}`,
        children: s
      }
    )
  ] });
};
export {
  z as default
};
//# sourceMappingURL=FeedbackReactions.js.map
