import { jsx as e } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
import c from "classnames";
import i from "../Typography/Typography.js";
import { TypographyVariant as p, TypographyElement as m } from "../Typography/types.js";
import { useState as I, useMemo as v, useCallback as T, useEffect as g } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
/* empty css              */
import { Icon as d } from "../Icon/Icon.js";
import q from "../../../utils/random/uniqueId.js";
const j = ({ checked: a, error: h, description: n, disabled: y, id: u, label: b, name: _, value: C, onInput: o, className: k, ...x }) => {
  const [r, s] = I(a), f = v(q, []), t = u || f, N = T(
    (l) => {
      o?.(l), a === void 0 && s(l?.currentTarget?.checked ?? !1);
    },
    [a, o]
  );
  return g(() => {
    s(a);
  }, [a]), /* @__PURE__ */ e("div", { className: c("adyen-pe-checkbox", k), children: [
    /* @__PURE__ */ e(
      "input",
      {
        name: _,
        type: "checkbox",
        checked: r,
        disabled: y,
        className: c("adyen-pe-visually-hidden adyen-pe-checkbox__input"),
        id: t,
        onInput: N,
        ...x
      }
    ),
    /* @__PURE__ */ e("label", { className: "adyen-pe-checkbox__label", htmlFor: t, children: [
      r ? /* @__PURE__ */ e(d, { name: "checkmark-square-fill", className: "adyen-pe-checkbox__icon" }) : /* @__PURE__ */ e(d, { name: "square", className: c("adyen-pe-checkbox__icon", { "adyen-pe-checkbox__icon--error": h }) }),
      /* @__PURE__ */ e("div", { className: "adyen-pe-checkbox__label-content", children: [
        /* @__PURE__ */ e(i, { el: m.SPAN, variant: p.BODY, children: b }),
        n && /* @__PURE__ */ e(i, { el: m.SPAN, variant: p.BODY, className: "adyen-pe-checkbox__description", children: n })
      ] })
    ] })
  ] });
};
export {
  j as Checkbox
};
