"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
require("@emotion/react");
const React = require("react");
const jsxRuntime = require("@emotion/react/jsx-runtime");
const style = require("./style.js");
const tick_black_thin = require("../../assets/icon/tick_black_thin.svg.js");
const CheckBox = ({
  label,
  defaultChecked = false,
  controlChecked,
  onClick,
  onChange,
  cssStyle
}) => {
  const [checked, setChecked] = React.useState(defaultChecked);
  React.useEffect(() => {
    onChange == null ? void 0 : onChange(checked);
  }, [checked, onChange]);
  React.useEffect(() => {
    if (controlChecked !== void 0) {
      setChecked(controlChecked);
    }
  }, [controlChecked]);
  return /* @__PURE__ */ jsxRuntime.jsxs(
    style.CheckBoxContainerWrap,
    {
      onClick: (e) => {
        onClick == null ? void 0 : onClick(e);
        setChecked((checked2) => !checked2);
      },
      css: cssStyle,
      children: [
        /* @__PURE__ */ jsxRuntime.jsx(style.CheckBoxWrap, { children: checked && /* @__PURE__ */ jsxRuntime.jsx("img", { src: tick_black_thin }) }),
        /* @__PURE__ */ jsxRuntime.jsx(style.CheckBoxLabelSpanWrap, { children: label })
      ]
    }
  );
};
exports.CheckBox = CheckBox;
//# sourceMappingURL=index.js.map
