import "@emotion/react";
import { useState, useEffect } from "react";
import { jsxs, jsx } from "@emotion/react/jsx-runtime";
import { CheckBoxContainerWrap, CheckBoxWrap, CheckBoxLabelSpanWrap } from "./style.js";
import iconTick from "../../assets/icon/tick_black_thin.svg.js";
const CheckBox = ({
  label,
  defaultChecked = false,
  controlChecked,
  onClick,
  onChange,
  cssStyle
}) => {
  const [checked, setChecked] = useState(defaultChecked);
  useEffect(() => {
    onChange == null ? void 0 : onChange(checked);
  }, [checked, onChange]);
  useEffect(() => {
    if (controlChecked !== void 0) {
      setChecked(controlChecked);
    }
  }, [controlChecked]);
  return /* @__PURE__ */ jsxs(
    CheckBoxContainerWrap,
    {
      onClick: (e) => {
        onClick == null ? void 0 : onClick(e);
        setChecked((checked2) => !checked2);
      },
      css: cssStyle,
      children: [
        /* @__PURE__ */ jsx(CheckBoxWrap, { children: checked && /* @__PURE__ */ jsx("img", { src: iconTick }) }),
        /* @__PURE__ */ jsx(CheckBoxLabelSpanWrap, { children: label })
      ]
    }
  );
};
export {
  CheckBox
};
//# sourceMappingURL=index.js.map
