"use client";
import { jsx as e, jsxs as w } from "react/jsx-runtime";
import { motion as c } from "framer-motion";
import * as s from "react";
import { cn as n } from "../../lib/utils.js";
const x = {
  container: {
    initial: { opacity: 0, y: 20 },
    animate: { opacity: 1, y: 0 },
    exit: { opacity: 0, y: -20 }
  }
};
function I({
  value: r = 1,
  onChange: l,
  min: p = 1,
  max: b = 4,
  className: g,
  buttonClassName: d,
  counterClassName: h,
  id: v,
  "data-testid": y
}) {
  const [t, a] = s.useState(r), [u, m] = s.useState(!1);
  s.useEffect(() => {
    a(r);
  }, [r]);
  const N = (o) => {
    if (o.preventDefault(), t < b) {
      const i = t + 1;
      a(i), l?.(i);
    } else
      f();
  }, j = (o) => {
    if (o.preventDefault(), t > p) {
      const i = t - 1;
      a(i), l?.(i);
    } else
      f();
  }, f = () => {
    m(!0), setTimeout(() => m(!1), 300);
  };
  return /* @__PURE__ */ e(
    c.div,
    {
      id: v,
      "data-testid": y,
      "data-slot": "input-selector",
      variants: x.container,
      initial: "initial",
      animate: "animate",
      exit: "exit",
      className: n(
        "flex w-full flex-col items-center justify-center gap-8",
        g
      ),
      children: /* @__PURE__ */ w(
        c.div,
        {
          variants: u ? {
            initial: { x: 0 },
            vibrate: {
              x: [0, -5, 5, -5, 5, 0],
              transition: { duration: 0.3 }
            }
          } : void 0,
          initial: "initial",
          animate: u ? "vibrate" : "initial",
          className: "flex items-center gap-8",
          children: [
            /* @__PURE__ */ e(
              "button",
              {
                type: "button",
                onClick: j,
                className: n(
                  "border-d-border h-12 w-12 rounded-full",
                  "bg-d-background",
                  "hover:bg-d-accent hover:text-d-accent-foreground",
                  "text-d-foreground cursor-pointer",
                  "flex items-center justify-center",
                  d
                ),
                children: /* @__PURE__ */ e("span", { className: "text-2xl font-medium", children: "-" })
              }
            ),
            /* @__PURE__ */ e(
              c.span,
              {
                variants: x.container,
                initial: "initial",
                animate: "animate",
                exit: "exit",
                className: n(
                  "text-d-foreground text-2xl font-medium",
                  h
                ),
                children: t
              },
              t
            ),
            /* @__PURE__ */ e(
              "button",
              {
                type: "button",
                onClick: N,
                className: n(
                  "border-d-border h-12 w-12 rounded-full border",
                  "bg-d-background",
                  "hover:bg-d-accent hover:text-d-accent-foreground",
                  "text-d-foreground cursor-pointer",
                  "flex items-center justify-center",
                  d
                ),
                children: /* @__PURE__ */ e("span", { className: "text-2xl font-medium", children: "+" })
              }
            )
          ]
        }
      )
    }
  );
}
export {
  I as InputSelector
};
