import "@emotion/react";
import { useState, useEffect } from "react";
import { jsx } from "@emotion/react/jsx-runtime";
import { SwitchButton, SwitchDot } from "./styled.js";
const checkLeftSize = {
  default: "calc(100% - 20px);",
  small: "calc(100% - 14px);"
};
const Switch = function({
  defaultChecked,
  controlChecked,
  onChange,
  size = "default",
  cssStyle,
  className,
  style
}) {
  const [checked, setChecked] = useState(defaultChecked);
  useEffect(() => {
    if (controlChecked !== void 0) {
      setChecked(controlChecked);
    }
  }, [controlChecked]);
  return /* @__PURE__ */ jsx(
    SwitchButton,
    {
      size,
      checked,
      type: "button",
      role: "switch",
      "aria-checked": "true",
      "ant-click-animating": "false",
      onClick: () => {
        setChecked(!checked);
        onChange == null ? void 0 : onChange(!checked);
      },
      css: cssStyle,
      className,
      style,
      children: /* @__PURE__ */ jsx(
        SwitchDot,
        {
          size,
          checked,
          checkedLeft: checkLeftSize[size]
        }
      )
    }
  );
};
export {
  Switch
};
//# sourceMappingURL=index.js.map
