import { jsxs as r, jsx as s } from "react/jsx-runtime";
import { useState as I } from "react";
import e from "../../utils/classNames.js";
const i = {
  VARIANT_FULL: "full",
  VARIANT_COMPACT: "compact"
}, o = (A) => {
  const {
    title: n,
    label: C,
    alignRight: t = !1,
    variant: N = i.VARIANT_FULL,
    disabled: l = !1,
    onClick: c,
    className: d,
    ...g
  } = A, [a, h] = I(!1), p = () => !l && h(!0), m = () => h(!1), v = N === o.VARIANT_COMPACT, x = e(
    "Pager",
    "bg-white",
    "border",
    "display-flex justify-space-between align-items-center",
    a && "border-color-highlight",
    t && "flex-row-reverse",
    l && "pointer-events-none",
    "cursor-pointer user-select-none"
  ), f = e(
    "rioglyph",
    l ? "text-color-light" : "text-color-darker",
    a && "text-color-highlight"
  ), u = e(
    l ? "text-color-light" : "text-color-darker",
    a && "text-color-highlight"
  );
  if (v) {
    const w = e(
      x,
      "rounded-circle",
      "padding-y-5 padding-x-15",
      "width-auto",
      d
    ), V = e(
      f,
      t ? "rioglyph-chevron-left margin-right-5" : "rioglyph-chevron-right margin-left-5",
      "text-size-10"
    );
    return /* @__PURE__ */ r(
      "div",
      {
        ...g,
        className: w,
        onMouseEnter: p,
        onMouseLeave: m,
        onClick: c,
        children: [
          /* @__PURE__ */ s("div", { className: `display-flex flex-1-1 flex-column ${t ? "align-items-end" : ""}`, children: /* @__PURE__ */ s("div", { className: u, children: n }) }),
          /* @__PURE__ */ s("span", { className: V })
        ]
      }
    );
  }
  const y = e(
    x,
    "rounded",
    "padding-y-15 padding-x-20",
    "width-100pct",
    d
  ), T = e(
    f,
    t ? "rioglyph-arrow-left margin-right-10" : "rioglyph-arrow-right margin-left-10",
    "text-size-200pct"
  ), L = e(u, t && "text-right", "text-size-16 text-medium");
  return /* @__PURE__ */ r(
    "div",
    {
      ...g,
      className: y,
      onMouseEnter: p,
      onMouseLeave: m,
      onClick: c,
      children: [
        /* @__PURE__ */ r("div", { className: `display-flex flex-1-1 flex-column ${t ? "align-items-end" : ""}`, children: [
          /* @__PURE__ */ s("div", { className: "text-color-gray line-height-16", children: C }),
          /* @__PURE__ */ s("div", { className: L, children: n })
        ] }),
        /* @__PURE__ */ s("div", { className: "text-size-12 display-grid place-items-center", children: /* @__PURE__ */ s("span", { className: T }) })
      ]
    }
  );
};
o.VARIANT_FULL = i.VARIANT_FULL;
o.VARIANT_COMPACT = i.VARIANT_COMPACT;
export {
  i as PagerVariant,
  o as default
};
//# sourceMappingURL=Pager.js.map
